Text Reveal
Word-by-word blur reveal on scroll.
- 0.8 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Every word arrives exactly when it should
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/text-reveal.jsonAdds components/velora/text-reveal.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
text*Plain text — revealed word by word | string | — |
className | string | — |
as | "h1" | "h2" | "h3" | "p" | "span" | "span" |
delay | number | 0 |
staggerSeconds between each word | number | 0.045 |
once | boolean | true |
Accessibility
- Reduced motion
- All words are visible immediately, including before hydration, with no fade, blur or slide.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The full sentence is read once from an sr-only span; the per-word animated spans are aria-hidden.