Компоненты/Сжимающаяся стопка

Сжимающаяся стопка

29 сентября 2026

Карточки прилипают к верху одна за другой и уменьшаются по мере прокрутки, складываясь в ступенчатую стопку.

Установка

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

Файлы

sticky-card-stack.tsx
НазадЛипкий заголовок с размытиемДалееЛипкие карточки с поворотом

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

Ширину и скругление карточек, сдвиг между ними и степень уменьшения можно задать пропсами. Над стопкой висит подсказка с линией, которая зовёт прокрутить вниз.

Вручную

Скопируйте эти файлы в components/sticky-card-stack/:

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

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

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

import { useRef } from "react";

import { StickyCardStack } from "@/components/sticky-card-stack/sticky-card-stack";

const ITEMS = [
{ title: "Проект 1", src: "/photos/1.webp" },
{ title: "Проект 2", src: "/photos/2.webp" },
];

export default function Page() {
const ref = useRef<HTMLDivElement>(null);
return (
  <div ref={ref} className="h-screen overflow-y-auto">
    <StickyCardStack items={ITEMS} container={ref} />
  </div>
);
}

Пропсы

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

Карточки: подпись и адрес фото

Тип StickyCardStackItem[]

hint?

Подсказка над стопкой

Тип string·По умолчанию "прокрутите вниз, чтобы собрать стопку"

container?

Прокручиваемый контейнер, за которым следит стопка

Тип RefObject<HTMLElement | null>·По умолчанию окно

cardWidth?

Ширина карточки в пикселях

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

radius?

Скругление карточки в пикселях

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

offset?

Сдвиг каждой следующей карточки вниз в пикселях

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

scaleStep?

Насколько уменьшается каждая карточка под верхней

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

className?

Дополнительные классы корневого блока

Тип string