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 glass dialog |
| 8 |
| 9 | floating="dialog" casts the deeper shadow; the glass materializes as the contents zoom in. |
| 10 |
| 11 | ```tsx |
| 12 | import { useLayoutEffect, useRef } from "react"; |
| 13 | import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react"; |
| 14 |
| 15 | export function ShareDialog({ onClose }: { onClose: () => void }) { |
| 16 | const glass = useRef<LiquidGlassHandle | null>(null); |
| 17 | useLayoutEffect(() => { |
| 18 | void glass.current?.materialize({ duration: 280, scale: 0.95 }); |
| 19 | }, []); |
| 20 | const close = () => void glass.current?.dematerialize({ duration: 180, scale: 0.97 }).then(onClose); |
| 21 | return ( |
| 22 | <div role="dialog" aria-modal="true" className="fixed left-1/2 top-1/3 w-80 -translate-x-1/2 rounded-[28px] p-5"> |
| 23 | <LiquidGlass glassRef={glass} appearance="class" floating="dialog" /> |
| 24 | <h2 className="font-semibold">Share this album</h2> |
| 25 | <button className="liquid-glass-well mt-4 h-10 w-full rounded-full" onClick={close}>Copy link</button> |
| 26 | </div> |
| 27 | ); |
| 28 | } |
| 29 | ``` |
| 30 |