# @colineapp/liquid-glass

> Liquid Glass for the web: the rim refraction, light and motion of iOS 27's glass on any rounded element, with React bindings and tabs whose thumb lifts into a lens. MIT.

Version 0.1.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Playground: https://liquid-glass.coline.space.

## A glass dialog

floating="dialog" casts the deeper shadow; the glass materializes as the contents zoom in.

```tsx
import { useLayoutEffect, useRef } from "react";
import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react";

export function ShareDialog({ onClose }: { onClose: () => void }) {
  const glass = useRef<LiquidGlassHandle | null>(null);
  useLayoutEffect(() => {
    void glass.current?.materialize({ duration: 280, scale: 0.95 });
  }, []);
  const close = () => void glass.current?.dematerialize({ duration: 180, scale: 0.97 }).then(onClose);
  return (
    <div role="dialog" aria-modal="true" className="fixed left-1/2 top-1/3 w-80 -translate-x-1/2 rounded-[28px] p-5">
      <LiquidGlass glassRef={glass} appearance="class" floating="dialog" />
      <h2 className="font-semibold">Share this album</h2>
      <button className="liquid-glass-well mt-4 h-10 w-full rounded-full" onClick={close}>Copy link</button>
    </div>
  );
}
```