ТекстProНовое
Появление из-под среза
Буквы или слова по очереди выезжают снизу из-под невидимой линии, с пружиной. Подходит для первого экрана и заголовков разделов.
Настройки
gradientFrom
gradientTo
Основано на Vertical Cut Reveal (MIT лицензия) · Условия использования
Параметры
14 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Текст, который появляется. |
| splitBy | 'words' | 'characters' | 'lines' | string | "words" | Как делить текст: по словам, буквам или строкам. |
| staggerDuration | number | 0.2 | Задержка между частями текста, в секундах. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | С какой буквы начинается волна. |
| reverse | boolean | false | Выезжать сверху вниз, а не снизу вверх. |
| autoStart | boolean | true | Запускать анимацию сразу после появления на странице. |
| transition | AnimationOptions | "{ type: 'spring', stiffness: 190, damping: 22 }" | Настройки пружины, сюда же можно добавить delay. |
| containerClassName | string | — | Классы для внешнего блока. |
| wordLevelClassName | string | — | Классы для обёртки каждого слова. |
| elementLevelClassName | string | — | Классы для каждой буквы или слова. |
| onStart / onComplete | () => void | — | Вызываются в начале и в конце анимации. |
| ref | { startAnimation(): void; reset(): void } | — | Ручной запуск и сброс анимации, например по скроллу. |
| gradientFrom | string | "#ffffff" | Цвет первой буквы. Текст плавно переходит в цвет конца градиента. |
| gradientTo | string | "#d4d4d8" | Цвет последней буквы, конец градиента. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge