Browse components
Reveal Text
Letters rise out of a mask as they scroll into view; hover and a photo shows through the type.
Installation
npx shadcn@latest add @glint-ui/reveal-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/reveal-text.json
Usage
import { RevealText } from "@/components/ui/reveal-text";
<RevealText text="WANDER" image="/photos/coast.jpg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "WANDER" | Text to reveal. |
| image | string | "https://picsum.photos/seed/glint-8/1200/600" | Image shown through the letters on hover. |
| stagger | number | 45 | Delay between letters, in ms. |
| duration | number | 900 | Slide duration of each letter, in ms. |
| className | string | — | Extra classes for the root element. |