Large type set in its own font and rendered live in WebGL under drops of clear liquid glass. The drops drift slowly, melt into each other and split, and one follows the cursor on a spring. Under the glass the type is magnified and bent toward the edges with a faint color split, a soft inner shadow, a thin bright rim and a specular highlight. The real text stays in the page for screen readers. Colors, drop count and size, merge smoothness, refraction, magnification, dispersion, rim, highlight and drift speed are props.
The import and the props worth knowing about, in one place.
import { GlassLens } from "@/components/beste/component/glass-lens";
// The type comes from className: size, weight, family and tracking
<GlassLens
as="h1"
text="See through everything."
className="min-h-[28rem] text-[12vw] font-semibold tracking-[-0.05em]"
/>
<GlassLens
text="Blown, not poured."
className="min-h-[24rem] font-serif text-8xl"
inkColor="var(--foreground)" // any CSS color, tokens included
tintColor="var(--primary)"
blobs={4} // 1 to 4 drops
magnify={0.8} // enlarge the type under the glass
dispersion={0.7} // color split at the edges
interactive={false} // no drop follows the cursor
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The words set under the glass. The type comes from `className` (size, weight, family, tracking). |
as | "h1" | "h2" | "h3" | "p" | "span" | — | Element the accessible copy of the text renders as. |
inkColor | string | — | Color of the type. Any CSS color, tokens included. |
paperColor | string | — | Color of the page behind the type. |
tintColor | string | — | Color the glass is faintly tinted with. |
tint | number | — | Strength of that tint, 0 to 1. |
blobs | number | — | Number of glass drops, 1 to 4. |
size | number | — | Size of the drops, 0 to 1. |
smoothness | number | — | How readily drops melt into each other, 0 (crisp) to 1 (syrupy). |
refraction | number | — | How much the glass bends the type toward its edges, 0 to 1. |
magnify | number | — | How much the glass enlarges the type beneath it, 0 to 1. |
dispersion | number | — | Color split at the glass edges, 0 to 1. |
rim | number | — | Thin bright rim and dark edge line, 0 to 1. |
highlight | number | — | Specular highlight on the glass, 0 to 1. |
speed | number | — | Drift speed, 1 is the default pace. |
interactive | boolean | — | One drop follows the cursor. |
paused | boolean | — | Freeze the glass where it is. |
className | string | — | |
children | ReactNode | — |