Liquid Glass Lens
A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it.
Liquid Glass
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/liquid-glass-lens.json"LiquidGlassLens is a circular glass disc that floats over its parent's content
and tracks the cursor, refracting everything beneath it through a converging SVG
displacement map. It only appears while the pointer is over the parent and fades
out on leave. It is pointer-events-none, so it never blocks clicks.
True refraction requires backdrop-filter: url() (Chrome and Edge). In browsers
without it the lens gracefully falls back to a plain frosted blur.
For a static glass panel that wraps your own content, see Liquid Glass Card.
Usage
The parent must be positioned (relative). Drop the lens in as a sibling of the
content you want it to roam over:
import { LiquidGlassLens } from "@/components/godui/liquid-glass-lens";
<div className="relative">
{/* ...images, text, any page content... */}
<LiquidGlassLens size={200} />
</div>Sizing
size is the lens diameter in px. Bump strength for a stronger magnify.
<LiquidGlassLens size={260} strength={110} dispersion={0.25} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 160 | Diameter of the circular lens in px. |
blur | number | 2 | Frost (backdrop blur) in px. |
strength | number | 80 | Refraction displacement scale — how hard the lens bends. |
dispersion | number | 0.15 | Chromatic aberration, 0–1. Splits the R/G/B refraction. |
saturation | number | 1.6 | Backdrop saturation multiplier. |
tint | string | rgba(255,255,255,.08) | Glass tint color. |
sheen | number | 0.5 | Specular highlight intensity, 0–1. |
LiquidGlassLens also forwards every standard <div> attribute (className,
style, id, …) to the root element.