# @colineapp/liquid-glass

> 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.

Version 0.2.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.

### variant

- Type: `"regular" | "clear" | "lens"`
- Default: `"regular"`
- Group: Glass options

`regular` diffuses the page so text on the glass stays legible over anything, as clear or tinted as its `level`. `clear` is regular glass at level 0, iOS 27's More Clear: the page barely changes but for a trace of wash and the rim, for glass over media. `lens` is the clear lens a control lifts into; pair it with `geometry: LENS_GEOMETRY`.

```tsx
<LiquidGlass variant="clear" />
```