Installation
Usage
import { GlassLens } from "@/components/glass-lens"
export function Hero() {
return (
<GlassLens text="Clarity." y={0.42} className="flex min-h-[32rem] flex-col items-center justify-end px-6 pb-12 text-center">
<p className="text-muted-foreground">Move your pointer to look closer.</p>
</GlassLens>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Clarity." | The headline drawn behind the glass, in your page's font. It is also real text on the page, for screen readers and search engines. |
| src | string | — | An image to put behind the glass instead of the headline, same origin or served with CORS. text stays its name. |
| backdrop | "grid" | "dots" | "plain" | "grid" | What lies under the headline. |
| colors | string[] | [] (theme: --primary, --chart-2, --chart-4) | Two or three colours for the soft glows behind the headline. Any CSS colour. |
| shape | "orb" | "pill" | "orb" | The glass: a round orb or a wide pill. |
| size | number | 1 | Size of the glass, from 0.5 to 1.6. |
| y | number | 0.45 | Where the headline sits, from 0 (top) to 1 (bottom). |
| autoplay | boolean | true | When nobody is near, the glass wanders slowly over the headline. Off, it rests over the headline. |
| interactive | boolean | true | The glass follows the pointer on a spring and pressing swells it. Presses on links and buttons stay theirs. |
| moment | number | undefined (moves) | Holds the glass still where its wander takes it at this moment, in seconds: a fixed pose for a calm hero, or the frame you capture. |
| captureRef | Ref<GlassLensHandle> | — | Gets { capture(width, height) }, which draws the glass and the scene behind it as it is right now again at that size, on your background colour, and resolves a PNG Blob: a 4K hero, a wallpaper, a social card. It works on a software renderer too, and rejects with a plain message when the device can't draw that size. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any div attribute. Your className is merged last, so it wins; size the background with it. |
Accessibility
- The headline is real text in the page (visually hidden), so screen readers and search engines read it; the canvas and its still are decorative and hidden from assistive technology.
- Nothing under the glass goes missing: it magnifies what is beneath it rather than hiding it.
- With prefers-reduced-motion the glass rests over the headline and ignores the pointer.
- It pauses off-screen and in hidden tabs, and frees its GPU memory when removed.
- Without WebGL2, on a software renderer, or on a device that can't hold a smooth frame rate, it shows the same scene without the glass.
Changelog
- v1.1.0Latest
New: `moment` holds a frame still, and `captureRef` saves it as a PNG at any size.