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. Source: https://upstream.codes/coline/liquid-glass. Playground: https://liquid-glass.coline.space. |
| 6 |
| 7 | ### floating |
| 8 |
| 9 | - Type: `boolean | "dialog"` |
| 10 | - Default: `false` |
| 11 | - Group: Glass options |
| 12 |
| 13 | For menus, popovers, dialogs and sheets. Floating glass diffuses the page more, as iOS 27's does, so text beneath washes into soft colour, and the surface casts a drop shadow (`--liquid-glass-shadow`). `"dialog"` casts a dialog's deeper shadow (`--liquid-glass-dialog-shadow`). |
| 14 |
| 15 | ```tsx |
| 16 | <LiquidGlass floating="dialog" /> |
| 17 | ``` |
| 18 |