Components
Liquid glass
Glass that actually refracts: the backdrop bends at the rim like a lens and splits into color at the edge — not just a blur.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidGlass } from '@vizzele/react';
<LiquidGlass refraction={38} bezel={0.32} className="panel">
Content floating on glass
</LiquidGlass>Props
| Prop | Type | Default | Description |
|---|---|---|---|
refraction | number | 38 | Bend strength (px). |
bezel | number | 0.32 | Width of the bent rim (fraction of the short side). |
dispersion | number | 0.12 | Per-channel split at the edge (prismatic fringe). |
blur | number | 1.5 | Blur after refraction. |
saturation | number | 1.6 | Color boost. |
Accessibility
- Real refraction needs SVG filters in backdrop-filter (Chromium). Safari and Firefox get a frosted-glass fallback automatically.
- Keep text on glass high-contrast — the tint (--vz-glass-tint) is there for legibility.