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.
| 1 | # @colineapp/liquid-glass |
| 2 | |
| 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-e55033.coline.space. |
| 6 | |
| 7 | ### <LiquidGlass /> |
| 8 | |
| 9 | - Type: `LiquidGlassOptions & { className?, style?, children?, glassRef? }` |
| 10 | - Group: React |
| 11 | |
| 12 | Glass behind a surface's content. Render it first inside a positioned, rounded element. `glassRef` receives the handle, for materialize() and magnify(). |
| 13 | |
| 14 | ```tsx |
| 15 | <nav className="relative rounded-full px-6 py-3"> |
| 16 | <LiquidGlass interactive /> |
| 17 | … |
| 18 | </nav> |
| 19 | ``` |
| 20 |