# @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. Source: https://upstream.codes/coline/liquid-glass. Playground: https://liquid-glass.coline.space.

## A menu that materializes

Fade the contents, never the surface; the glass grows from clear.

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

export function Menu({ open, items }: { open: boolean; items: string[] }) {
  const glass = useRef<LiquidGlassHandle | null>(null);
  const [active, setActive] = useState(-1);
  useEffect(() => {
    if (open) void glass.current?.materialize({ duration: 240, scale: 0.96 });
  }, [open]);
  if (!open) return null;
  return (
    <div role="menu" className="absolute right-0 top-12 w-56 rounded-2xl p-1.5">
      <LiquidGlass glassRef={glass} appearance="class" floating />
      {items.map((item, index) => (
        <button key={item} role="menuitem" onPointerEnter={() => setActive(index)}
          className={`w-full rounded-xl px-3 py-2 text-left ${index === active ? "liquid-glass-well" : ""}`}>
          {item}
        </button>
      ))}
    </div>
  );
}
```