Rotating Text
Перебирает слова с каскадной прокруткой, а контейнер плавно подстраивается под ширину каждого.
зависимости 0файлы tsx + cssпараметры 8react 18+
Выпускаем быстрее
X 0000 Y 0000
Пульт08 параметров
01texts
Слова для перебора.
02interval
ms
Время показа.
03stagger
ms
Задержка между буквами.
04duration
ms
Движение одной буквы.
05splitBy
Как делить каждое слово.
06direction
Направление движения.
07staggerFrom
Откуда идёт каскад.
08animateWidth
Плавно менять ширину под слово.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
texts | string[] | ["быстрее","громче","плавнее","по-вашему"] | Слова для перебора. |
interval | number | 2200 | Время показа. |
stagger | number | 28 | Задержка между буквами. |
duration | number | 600 | Движение одной буквы. |
splitBy | 'chars' | 'words' | 'none' | "chars" | Как делить каждое слово. |
direction | 'up' | 'down' | "up" | Направление движения. |
staggerFrom | 'first' | 'last' | 'center' | "first" | Откуда идёт каскад. |
animateWidth | boolean | true | Плавно менять ширину под слово. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |