ТекстНовое
Текст-шифровка
Буквы быстро перебирают случайные символы и собираются в нужное слово. Эффект повторяется при наведении мыши.
Настройки
gradientFrom
gradientTo
scrambleColor
Основано на Hyper Text (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
11 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | string | "CODEARIA" | Текст, который перемешивается и собирается обратно. |
| duration | number | 800 | Сколько длится перемешивание, в миллисекундах. |
| delay | number | 0 | Пауза перед первым запуском, в миллисекундах. |
| animateOnHover | boolean | true | Запускать эффект снова при наведении мыши. |
| startOnView | boolean | false | Ждать, пока текст появится на экране. |
| as | 'div' | 'h1' | 'h2' | 'h3' | 'p' | 'span' | ... | "div" | HTML-тег обёртки. |
| characterSet | string[] | — | Набор символов для перемешивания. По умолчанию латиница A–Z. |
| className | string | — | Классы Tailwind для обёртки. |
| gradientFrom | string | "#ffffff" | Цвет первой буквы. Текст плавно переходит в цвет конца градиента. |
| gradientTo | string | "#d4d4d8" | Цвет последней буквы, конец градиента. |
| scrambleColor | string | "#a1a1aa" | Цвет букв, которые ещё перемешиваются. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge