Text Reveal
Word-by-word reveal and typewriter text. Pro · Effects › Borders, text and numbers
Text that reveals itself — word by word or letter by letter, from the start, the middle, the end or in a shuffled order; on mount, when scrolled into view, or tied to the scroll position — or is typed out behind a caret with a human rhythm. Screen readers get the whole text once; the animated copy is hidden from them. Server-rendered and no-JS text is fully visible, and the typewriter reserves the final layout up front, so nothing reflows while it types; it writes the text straight into the page, with no React render per character. Reduced motion shows the text at once.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add text-revealnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TextReveal } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
children * | string | The text to reveal. | |
variant | 'words' | 'typewriter' | 'words' | words — the text rises and comes into focus piece by piece; typewriter — characters are typed out behind a blinking caret. |
trigger | 'mount' | 'view' | 'scroll' | 'view' | mount — right away; view — when scrolled into view; scroll — each piece lights up as the text scrolls through the viewport (typewriter treats it as view). |
split | 'words' | 'chars' | 'words' | Words variant: reveal word by word, or letter by letter (words still never break across lines). |
from | 'start' | 'center' | 'end' | 'random' | 'start' | Words variant: where the wave starts — the first piece, the middle, the last, or a shuffled order. |
delay | number | 0 | Delay before the reveal starts, ms. |
stagger | number | Words variant: ms between one piece and the next (default 40 for words, 18 for letters). | |
speed | number | 40 | Typewriter: characters per second, on average — the rhythm is a little uneven and pauses after punctuation, like a person typing. |
Related components
- Animated Border — Light beam running around a border
- Shimmer Text — Shine sweeping across text
- Number Ticker — Animated counter with Intl formatting
- Marquee — Endless scrolling row of logos and testimonials
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
Previous: Shimmer Text · Next: Number Ticker · All Effects