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, menus that pour out of their button, and segmented tabs whose thumb clears into a lens. MIT. |
| 4 | |
| 5 | Version 0.2.0. Install: `npm install @colineapp/liquid-glass` |
| 6 |
| 7 | ### pourFrom(source, options?) |
| 8 |
| 9 | - Type: `(source: Element | { x: number; y: number }, options?: { cover?, side?, submenu? }) => Promise<boolean>` |
| 10 | - Group: The glass handle |
| 11 |
| 12 | Pours a menu or popover out of the button that opened it, as iOS 27's do: the glass starts as the button and inflates into the surface, its height leading and overshooting, while the contents ride inside it and sharpen as it lands. `cover: true` moves the surface over its button (up to 56px tall), so the button becomes the menu. Pass a point for a context menu, `submenu: true` for a sub-menu unfolding beside its row. Call it once the surface is shown and placed. Resolves true once landed, false if drawBack() interrupted it. |
| 13 |
| 14 | ```ts |
| 15 | await glass.pourFrom(button, { cover: true }); |
| 16 | ``` |
| 17 |
