Компоненты/3D-сетка на прокрутке

3D-сетка на прокрутке

29 сентября 2026

Сетка фото поднимается колонками из глубины, а затем двадцать кадров вылетают из перспективы каждый под своим углом.

Установка

npm install clsx gsap motion tailwind-merge
pnpm add clsx gsap motion tailwind-merge
yarn add clsx gsap motion tailwind-merge
bun add clsx gsap motion tailwind-merge

Файлы

scroll-3d-grid.tsx
НазадСкретч-картаДалееСмена фото при прокрутке

Две сцены прокрутки подряд. В первой сетка семь на пять поднимается колонками снизу: центральные приходят первыми, крайние догоняют с задержкой, и все кадры проявляются из прозрачности.

Во второй сцене залипает сетка из двадцати кадров, и каждый вылетает из глубины со своим углом наклона, расстоянием и скоростью, пока все не встанут на места. Зазоры, скругление и сила перспективы настраиваются.

Вручную

Скопируйте эти файлы в components/scroll-3d-grid/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { Scroll3DGrid } from "@/components/scroll-3d-grid/scroll-3d-grid";

const photos = Array.from({ length: 21 }, (_, index) => `/photos/${index + 1}.webp`);

export function Grid() {
return (
  <div className="h-[720px]">
    <Scroll3DGrid gsapImages={photos} motionImages={photos.slice(0, 20)} perspective={300} />
  </div>
);
}

Пропсы

Пропс
Описание
gsapImages

Фотографии первой сетки из колонок

Тип string[]

motionImages

Двадцать кадров второй сцены

Тип string[]

gsapHint?

Подпись первой сцены

Тип ReactNode·По умолчанию "Scroll Effect with GSAP"

motionHint?

Подпись второй сцены

Тип ReactNode·По умолчанию "Scroll effect with motion.dev"

gap?

Зазор и отступ первой сетки в пикселях

Тип number·По умолчанию 16

radius?

Скругление кадров первой сетки

Тип number·По умолчанию 4

motionGap?

Зазор между кадрами второй сцены

Тип number·По умолчанию 8

perspective?

Перспектива второй сцены в пикселях

Тип number·По умолчанию 200

className?

Классы прокручиваемого контейнера

Тип string