ТекстНовое
Сменяющиеся слова
Слово в заголовке по очереди меняется на другие с пружинной анимацией по буквам. Подходит для первого экрана сайта.
Настройки
gradientFrom
gradientTo
backgroundColor
Основано на Text Rotate (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
17 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| texts | string[] | — | Список слов или фраз, которые сменяют друг друга. |
| rotationInterval | number | 2000 | Сколько держится одно слово, в миллисекундах. |
| staggerDuration | number | 0 | Задержка между буквами, в секундах. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | С какой буквы начинается волна. |
| splitBy | 'characters' | 'words' | 'lines' | string | "characters" | Как делить текст для анимации: по буквам, словам или строкам. |
| loop | boolean | true | Начинать список заново после последнего слова. |
| auto | boolean | true | Менять слова автоматически. |
| animatePresenceMode | 'wait' | 'popLayout' | 'sync' | "wait" | Ждать ли ухода старого слова перед появлением нового. |
| initial / animate / exit | MotionProps | — | Состояния анимации появления и ухода в формате Motion. |
| transition | Transition | "{ type: 'spring', damping: 25, stiffness: 300 }" | Настройки пружины или длительности. |
| mainClassName | string | — | Классы для внешнего блока, например фон-плашка. |
| splitLevelClassName | string | — | Классы для обёртки каждого слова. |
| elementLevelClassName | string | — | Классы для каждой буквы. |
| onNext | (index: number) => void | — | Вызывается при смене слова. |
| gradientFrom | string | "#ffffff" | Цвет первой буквы. Текст плавно переходит в цвет конца градиента. |
| gradientTo | string | "#d4d4d8" | Цвет последней буквы, конец градиента. |
| backgroundColor | string | "rgba(255,255,255,0.1)" | Заливка плашки за меняющимся словом. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge