Text
Text reveal
Reveal by letters, words or lines as text scrolls into view — rising, blurring or sliding out of a mask.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { TextReveal } from '@vizzele/react';
<TextReveal as="h2" by="words" variant="blur">
Everything here moves with weight and light.
</TextReveal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
by | 'chars' | 'words' | 'lines' | 'words' | Unit. |
variant | 'rise' | 'blur' | 'mask' | 'scale' | 'rise' | Entrance look. Lines default to mask. |
stagger | number | 18 / 45 / 90 | ms between units. |
once | boolean | true | Replay each time it enters. |
amount | number | 0.3 | Visible fraction to trigger. |
Accessibility
- The sentence stays readable to screen readers via aria-label; the pieces are aria-hidden.
- Built on CSS transitions with spring easings — hundreds of letters stay at 60 fps.
- Reduced motion: text is shown immediately.