КурсорыProНовое
След из картинок
За курсором тянется цепочка картинок, которые появляются и тают. Хорошо смотрится в портфолио и галереях.
Настройки
tileColor
tileAccentColor
tileHighlightColor
Основано на Image Trail (MIT лицензия) · Условия использования
Параметры
12 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| threshold | number | 100 | Сколько пикселей нужно провести мышью, чтобы появилась следующая картинка. |
| intensity | number | 0.3 | Насколько картинка догоняет курсор после появления. |
| repeatChildren | number | 3 | Сколько раз повторить набор картинок в следе. |
| zIndexDirection | 'new-on-top' | 'old-on-top' | "new-on-top" | Новые картинки ложатся сверху или снизу. |
| baseZIndex | number | 0 | Начальный z-index для всех картинок. |
| keyframes | DOMKeyframesDefinition | — | Анимация каждой картинки, например появление и исчезание. |
| keyframesOptions | AnimationOptions | — | Длительность и тайминги для keyframes. |
| as | ElementType | "div" | HTML-тег контейнера. |
| children | ReactNode | — | Элементы ImageTrailItem с картинками внутри. |
| tileColor | string | "#ffffff" | Основной цвет плашек в следе. Плашки берут его через var(--trail-c1). |
| tileAccentColor | string | "#9a9a9a" | Второй цвет плашек, var(--trail-c2). |
| tileHighlightColor | string | "#d4d4d4" | Светлый цвет для бликов на плашках, var(--trail-c3). |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge