Горизонтальный ряд узких скруглённых кадров. Кадр под курсором плавно раскрывается до квадрата, остальные в это время сжимаются обратно в полоски — вся лента перестраивается за доли секунды.
У раскрытого кадра проявляется затемнение снизу и подпись в правом нижнем углу. На сенсорных экранах кадр раскрывается по нажатию. Вертикальный вариант — «Раскрытие кадров: столбик».
Скопируйте эти файлы в components/hover-expand-strip/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { HoverExpandStrip } from "@/components/hover-expand-strip/hover-expand-strip";
const images = [
{ src: "/photos/1.webp", alt: "Первый кадр", code: "# 01" },
{ src: "/photos/2.webp", alt: "Второй кадр", code: "# 02" },
{ src: "/photos/3.webp", alt: "Третий кадр", code: "# 03" },
];
export function Strip() {
return <HoverExpandStrip images={images} expandedWidth={320} />;
}imagesКадры с подписями
Тип { src: string; alt: string; code: string }[]
expandedWidth?Ширина раскрытого кадра в пикселях
Тип number·По умолчанию 384
collapsedWidth?Ширина свёрнутого кадра в пикселях
Тип number·По умолчанию 80
height?Высота кадров в пикселях
Тип number·По умолчанию 384
radius?Скругление кадров в пикселях
Тип number·По умолчанию 24
gap?Зазор между кадрами в пикселях
Тип number·По умолчанию 4
duration?Длительность раскрытия в секундах
Тип number·По умолчанию 0.3
defaultActive?Индекс кадра, раскрытого при загрузке
Тип number·По умолчанию 1
className?Классы корневого блока
Тип string