Text Reveal

Появление текста по словам и печатная машинка. Pro · Эффекты › Рамки, текст и числа

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add text-reveal

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TextReveal } from 'valyro-ui-pro';

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.