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.
| 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 search field that swells |
| 8 |
| 9 | interactive lights it under the pointer; swell springs it on press. |
| 10 |
| 11 | ```tsx |
| 12 | <label className="relative flex h-11 items-center gap-2 rounded-full px-4"> |
| 13 | <LiquidGlass appearance="class" interactive swell /> |
| 14 | <SearchIcon /> |
| 15 | <input className="bg-transparent outline-none" placeholder="Search" /> |
| 16 | </label> |
| 17 | ``` |
| 18 |