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.
| > 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-e55033.coline.space. |
| 6 |
| 7 | ## A magnifying lens |
| 8 |
| 9 | The tab lens on its own: the lens variant, its geometry, four samples and magnify(). |
| 10 |
| 11 | ```tsx |
| 12 | import { useRef } from "react"; |
| 13 | import { LENS_GEOMETRY } from "@colineapp/liquid-glass"; |
| 14 | import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react"; |
| 15 |
| 16 | export function Lens() { |
| 17 | const lens = useRef<LiquidGlassHandle | null>(null); |
| 18 | return ( |
| 19 | <div |
| 20 | className="absolute size-24 rounded-full" |
| 21 | onPointerDown={() => lens.current?.magnify(1.15)} |
| 22 | onPointerUp={() => lens.current?.magnify(1)} |
| 23 | > |
| 24 | <LiquidGlass glassRef={lens} appearance="class" variant="lens" geometry={LENS_GEOMETRY} samples={4} /> |
| 25 | </div> |
| 26 | ); |
| 27 | } |
| 28 | ``` |
| 29 |