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.coline.space. |
| 6 |
| 7 | ## Without React |
| 8 |
| 9 | createLiquidGlass inserts the glass as the element's first child. |
| 10 |
| 11 | ```ts |
| 12 | import { createLiquidGlass } from "@colineapp/liquid-glass"; |
| 13 | import "@colineapp/liquid-glass/styles.css"; |
| 14 |
| 15 | const glass = createLiquidGlass(document.querySelector(".toolbar")!, { |
| 16 | interactive: true, |
| 17 | }); |
| 18 |
| 19 | glass.update({ variant: "clear" }); |
| 20 | glass.destroy(); |
| 21 | ``` |
| 22 |