ТекстProНовое
Буквы-кубики
При наведении каждая буква поворачивается как грань кубика и показывает свою копию. Хорошо смотрится в заголовках и ссылках меню.
Настройки
gradientFrom
gradientTo
swapColor
Основано на Letter 3D Swap (MIT лицензия) · Условия использования
Параметры
12 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Текст, который будет крутиться. |
| rotateDirection | 'top' | 'right' | 'bottom' | 'left' | "right" | В какую сторону поворачиваются буквы. |
| staggerDuration | number | 0.05 | Задержка между буквами, в секундах. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | С какой буквы начинается волна. |
| transition | ValueAnimationTransition | AnimationOptions | "{ type: 'spring', damping: 30, stiffness: 300 }" | Настройки пружины или длительности. |
| as | ElementType | "p" | HTML-тег внешнего блока. |
| mainClassName | string | — | Классы для внешнего блока. |
| frontFaceClassName | string | — | Классы передней грани. Задайте ей фон страницы. |
| secondFaceClassName | string | — | Классы второй грани, которая появляется при повороте. |
| gradientFrom | string | "#ffffff" | Цвет первой буквы. Текст плавно переходит в цвет конца градиента. |
| gradientTo | string | "#d4d4d8" | Цвет последней буквы, конец градиента. |
| swapColor | string | "rgba(255,255,255,0.6)" | Цвет грани, которая поворачивается к вам при наведении. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge