Фотографии лежат стопкой, нижние карточки слегка развёрнуты в разные стороны и притемнены. По нажатию верхний снимок отлетает вбок и уходит в самый низ колоды, а остальные на пружине занимают свои места.
Работает и с клавиатуры: Enter или пробел перелистывают стопку. Быстрые повторные нажатия не ломают анимацию — следующая карточка просто подхватывает движение.
Скопируйте эти файлы в components/photo-shuffle/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { PhotoShuffle } from "@/components/photo-shuffle/photo-shuffle";
const IMAGES = [
{ src: "/photos/1.webp", alt: "Долина на рассвете" },
{ src: "/photos/2.webp", alt: "Лесная тропа" },
{ src: "/photos/3.webp", alt: "Горы на закате" },
];
export function Gallery() {
return <PhotoShuffle images={IMAGES} width={260} height={340} />;
}imagesФотографии: адрес и подпись
Тип PhotoShuffleImage[]
width?Ширина карточки в пикселях
Тип number·По умолчанию 260
height?Высота карточки в пикселях
Тип number·По умолчанию 340
tilt?Наклон карточек в стопке в градусах
Тип number·По умолчанию 5
throwDistance?Насколько далеко отлетает верхний снимок
Тип number·По умолчанию 0.6 * width
hint?Подсказка под стопкой; пустое значение скрывает её
Тип string | null·По умолчанию "Нажмите, чтобы перемешать"
onChange?Вызывается при смене верхнего снимка
Тип (index: number) => void
className?Классы корневого блока
Тип string