Liquid Glass
hotGlass that refracts what’s behind it: backdrop blur + an SVG displacement map, rim lighting and a pointer-tracked specular. Frosted fallback outside Chromium.
backdrop-filtersvg-filterpointer4 files · 225 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/liquid-glass.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs liquid-glassUsage
import { LiquidGlass } from "@/components/opus/effects/liquid-glass";
<LiquidGlass className="p-6">…</LiquidGlass>API
| Prop | Type | Default | Description |
|---|---|---|---|
| refraction | number | 60 | Displacement strength. |
| blur | number | 4 | Backdrop blur (px). |
| tint | string | "rgba(255,255,255,0.06)" | Glass tint. |
| highlight | boolean | true | Pointer specular. |
Notes
backdrop-filter: url(#svg)only refracts in Chromium; Safari/Firefox show a stronger frosted blur instead (detected after mount).