Ведите мышью или пальцем по блоку — за курсором появляются картинки. Каждая новая выпрыгивает с упругим масштабом поверх предыдущих, а когда шлейф становится длиннее заданного, самые старые плавно схлопываются.
Картинки перебираются по кругу из переданного списка. Частота появления зависит от пройденного курсором расстояния, а при уходе курсора с блока весь шлейф исчезает. Можно включить самоисчезновение, чтобы каждая картинка пропадала сама через полторы секунды.
Скопируйте эти файлы в components/image-cursor-trail/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ImageCursorTrail } from "@/components/image-cursor-trail/image-cursor-trail";
const photos = ["/photos/1.webp", "/photos/2.webp", "/photos/3.webp", "/photos/4.webp"];
export function Promo() {
return <ImageCursorTrail items={photos} maxNumberOfImages={5} distance={15} imageSize={200} className="h-dvh" />;
}itemsАдреса картинок шлейфа
Тип string[]
maxNumberOfImages?Сколько картинок видно одновременно
Тип number·По умолчанию 5
distance?Делитель ширины окна: чем больше, тем чаще появляются картинки
Тип number·По умолчанию 20
fadeAnimation?Каждая картинка исчезает сама через 1,5 секунды
Тип boolean·По умолчанию false
imageSize?Ширина и высота картинки в пикселях
Тип number
radius?Скругление картинок в пикселях
Тип number·По умолчанию 24
imgClass?Классы каждой картинки
Тип string·По умолчанию "w-40 h-48"
children?Содержимое поверх блока
Тип ReactNode
className?Классы блока
Тип string