Liquid Glass for the web: the rim refraction, light and motion of iOS 27 glass on any rounded element. React bindings and pill tabs. MIT.
| 3 | > 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. |
| 4 |
| 5 | 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. |
| 6 |
| 7 | ## A menu that materializes |
| 8 |
| 9 | Fade the contents, never the surface; the glass grows from clear. |
| 10 |
| 11 | ```tsx |
| 12 | import { useEffect, useRef, useState } from "react"; |
| 13 | import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react"; |
| 14 |
| 15 | export function Menu({ open, items }: { open: boolean; items: string[] }) { |
| 16 | const glass = useRef<LiquidGlassHandle | null>(null); |
| 17 | const [active, setActive] = useState(-1); |
| 18 | useEffect(() => { |
| 19 | if (open) void glass.current?.materialize({ duration: 240, scale: 0.96 }); |
| 20 | }, [open]); |
| 21 | if (!open) return null; |
| 22 | return ( |
| 23 | <div role="menu" className="absolute right-0 top-12 w-56 rounded-2xl p-1.5"> |
| 24 | <LiquidGlass glassRef={glass} appearance="class" floating /> |
| 25 | {items.map((item, index) => ( |
| 26 | <button key={item} role="menuitem" onPointerEnter={() => setActive(index)} |
| 27 | className={`w-full rounded-xl px-3 py-2 text-left ${index === active ? "liquid-glass-well" : ""}`}> |
| 28 | {item} |
| 29 | </button> |
| 30 | ))} |
| 31 | </div> |
| 32 | ); |
| 33 | } |
| 34 | ``` |
| 35 |