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

### shape

- Type: `string | (width: number, height: number) => string`
- Group: Glass options

Glass of an outline no rounded rectangle makes: an SVG path of absolute M, L, H, V, C and Z commands in the surface's CSS pixels, or a function from its size to one. Each pixel is shaded from its distance to the outline, so the rim, glints and bend follow it. It is rendered whole for each size, a few hundred milliseconds for a large surface, so keep it to surfaces that don't resize. The rims stay within the surface's border-radius.

```tsx
<LiquidGlass shape="M0 24C0 10.7 10.7 0 24 0H136L178 40H296C309 40 320 51 320 64V216C320 229 309 240 296 240H24C10.7 240 0 229 0 216Z" />
```