ТекстProНовое
Буквы откликаются на курсор
Буквы рядом с курсором меняют размер, цвет или размытие, а дальние остаются как были. Анимировать можно любое CSS-свойство.
Настройки
color
activeColor
Основано на Text Cursor Proximity (MIT лицензия) · Условия использования
Параметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Текст эффекта. |
| styles | { [cssProperty]: { from, to } } | — | Какие CSS-свойства меняются и от какого значения к какому. |
| containerRef | RefObject<HTMLDivElement | null> | — | Блок, внутри которого считается положение курсора. |
| radius | number | 50 | Радиус действия вокруг курсора, в пикселях. |
| falloff | 'linear' | 'exponential' | 'gaussian' | "linear" | Как быстро эффект слабеет с расстоянием. |
| as | ElementType | "span" | HTML-тег элемента. |
| className | string | — | Дополнительные классы. |
| color | string | "#ffffff" | Цвет букв вдали от курсора. |
| activeColor | string | "#737373" | Цвет, в который буквы переходят рядом с курсором. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge