Компоненты/Карусель с маской

Карусель с маской

29 сентября 2026

Лента кадров, в которой соседние обрезаны маской сверху и снизу, а выбранный плавно раскрывается в полный рост и проявляет подпись.

Установка

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

Файлы

clip-path-carousel.tsx
НазадКруговой прогрессДалееРваная маска

Горизонтальная лента фотографий, где все невыбранные кадры обрезаны скруглённой маской clip-path сверху и снизу. Выбранный кадр плавно раскрывается в полный рост, а под ним из размытия проявляется подпись.

Ленту можно тянуть мышью или пальцем, листать стрелками по бокам, точками снизу и клавишами ← →. Лента бесконечная; по желанию включается автопрокрутка, которая останавливается при наведении и взаимодействии.

Вручную

Скопируйте эти файлы в components/clip-path-carousel/:

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

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

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

import { ClipPathCarousel } from "@/components/clip-path-carousel/clip-path-carousel";

const images = [
{ src: "/photos/1.webp", alt: "Горы", title: "Тихие вершины" },
{ src: "/photos/2.webp", alt: "Лес", title: "Лесная тропа" },
{ src: "/photos/3.webp", alt: "Берег", title: "Лазурный берег" },
];

export function Places() {
return <ClipPathCarousel images={images} clipInset={20} />;
}

Пропсы

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

Кадры с подписями

Тип { src: string; alt: string; title: string }[]

className?

Классы корневого блока

Тип string

autoplay?

Автоматическое листание

Тип boolean·По умолчанию false

loop?

Бесконечная прокрутка

Тип boolean·По умолчанию true

showNavigation?

Показывать стрелки

Тип boolean·По умолчанию true

showPagination?

Показывать точки

Тип boolean·По умолчанию true

clipInset?

Обрезка невыбранных кадров сверху и снизу в процентах

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

clipRadius?

Скругление маски в пикселях

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

height?

Высота ленты в пикселях

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

autoplayDelay?

Пауза автопрокрутки в миллисекундах

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