Usage
import { TextReveal } from "@/registry/components/text-reveal/text-reveal";
<TextReveal text="…" />Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | The text to reveal | |
| by | "word" | "char" | "word" | Reveal word by word or letter by letter |
| stagger | number | 40 | Time between two pieces, in ms |
| delay | number | 0 | Wait before the first piece, in ms |
| duration | number | 700 | Time each piece takes to arrive, in ms |
| as | "p" | "h1" | "h2" | "h3" | "span" | "p" | Element to render |
| once | boolean | true | Reveal only the first time; otherwise it plays again each time it enters the view |
| className | string | Extra class on the root |
When to use
- Headlines and short intros on landing pages that should arrive as you scroll - A key sentence you want read in order, like a mission statement or a quote
When not to use
Body text or UI labels.