ComponentsReveal
Word reveal
Words rise out of a clip.
Installation
$ npx shadcn@latest add @textlab/word-revealNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { WordReveal } from "@/components/textlab/word-reveal/word-reveal";
<WordReveal as="h1" text="Ship the story, not the slides" />Variants
risefallscaleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "rise" | "fall" | "scale" | "rise" | rise comes up from below the line, fall drops from above, scale grows from the baseline. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| stagger | number | 0.06 | Seconds between parts. |
| duration | number | 0.8 | Seconds each part takes. |
| ease | EaseName | [number, number, number, number] | "enter" | Easing token or cubic bezier. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Editorial headlines where each word should land with weight.
- Hero lines on load with trigger="mount".
Skip it
- Long paragraphs; the stagger gets slow past ~20 words.
- Text inside buttons or form labels.
Accessibility and motion
Accessibility
- Screen readers get the full sentence once; the clipped words are aria-hidden.
- Pass as="h1" or as="h2" to keep the outline.
Motion
- Each word travels its own height, so the motion scales with font size.
- Words start 60 ms apart and settle with the enter ease.
Reduced motion. Renders the sentence in place with no clip or movement.
Performance
- Transform and opacity only.
- One motion span per word.