Лента из двух колонок фотографий в собственной прокрутке. Каждый кадр появляется снизу затемнённым и размытым, наклонённым назад и перекошенным к краю, в центре экрана становится ровным и чётким, а уходя вверх снова заваливается и гаснет.
Эффект показан дважды: на GSAP и на motion — второй вариант движется мягче. Ширина ленты, зазор между кадрами и скругление общие для обеих сцен.
Скопируйте эти файлы в components/perspective-scroll-grid/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { PerspectiveScrollGrid } from "@/components/perspective-scroll-grid/perspective-scroll-grid";
const photos = Array.from({ length: 12 }, (_, index) => `/photos/${index + 1}.webp`);
export function Feed() {
return (
<div className="h-[720px]">
<PerspectiveScrollGrid images={photos} width={420} gap={24} />
</div>
);
}imagesФотографии ленты
Тип string[]
gsapHint?Подпись первой ленты
Тип ReactNode·По умолчанию "GSAP Perspective scroll effect"
motionHint?Подпись второй ленты
Тип ReactNode·По умолчанию "Framer motion Perspective scroll effect"
width?Максимальная ширина ленты в пикселях
Тип number·По умолчанию 384
gap?Зазор между кадрами в пикселях
Тип number·По умолчанию 32
radius?Скругление кадров в пикселях
Тип number·По умолчанию 4
className?Классы прокручиваемого контейнера
Тип string