ComponentsLight
Glass text
Glass letters that bend the scene behind them.
Installation
$ npx shadcn@latest add @textlab/glass-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { GlassText } from "@/components/textlab/glass-text/glass-text";
<GlassText text="Clarity" backdrop="url(/photo.jpg)" />Variants
clearfrosttintedProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "clear" | "frost" | "tinted" | "clear" | Strong refraction, milky soft glass, or glass tinted with the accent. |
| backdrop | string | a soft color field | The scene behind the glass, as a CSS background image. The letters refract it. |
| tint | string | var(--tl-accent) | Tint for the tinted variant. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Display words over photography or rich color fields.
- Premium, Apple-like hero moments.
Skip it
- Plain backgrounds; there is nothing for the glass to bend.
- Small sizes; the rim and highlight need room.
Accessibility and motion
Accessibility
- The text is read from a hidden copy; the glass layers are decorative.
- Use a backdrop that keeps the letters distinguishable, or pick frost.
Motion
- The refraction and highlight follow the pointer with damping.
- Nothing moves without a pointer, so it costs nothing at rest.
Reduced motion. Glass stays still; no pointer tracking.
Performance
- Three text layers with background clip; CSS variables update only while the pointer settles.