# @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, menus that pour out of their button, and segmented tabs whose thumb clears into a lens. MIT.

Version 0.2.0. Install: `npm install @colineapp/liquid-glass`. npm: https://www.npmjs.com/package/@colineapp/liquid-glass. Source: https://upstream.codes/coline/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({ scale: 0.965 });
  }, []);
  const close = () => void glass.current?.dematerialize({ scale: 0.98 }).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>
  );
}
```