Компоненты/Портфолио-полосы

Портфолио-полосы

29 сентября 2026

Узкие полосы портфолио с повёрнутыми подписями: наведённая пружинно раскрывается и показывает фото и годы проекта.

Установка

npm install motion
pnpm add motion
yarn add motion
bun add motion

Файлы

hover-expand-gallery.tsx
НазадВыезд медиа в героеДалееРаскрытие кадров: ряд

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

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

Вручную

Скопируйте эти файлы в components/hover-expand-gallery/:

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

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

import { HoverExpandGallery } from "@/components/hover-expand-gallery/hover-expand-gallery";

const projects = [
{ id: 1, label: "Бархат студия", year: "2024", image: "/photos/1.webp" },
{ id: 2, label: "Неон агентство", year: "2023", image: "/photos/2.webp" },
{ id: 3, label: "Полночный холст", year: "2022", image: "/photos/3.webp" },
];

export function Portfolio() {
return (
  <div className="h-[720px]">
    <HoverExpandGallery projects={projects} initialIndex={0} expandedWidth="24rem" />
  </div>
);
}

Пропсы

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

Проекты портфолио

Тип { id: number | string; label: string; year: string; image: string }[]

initialIndex?

Индекс полосы, раскрытой при загрузке

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

expandedWidth?

Ширина раскрытой полосы

Тип string·По умолчанию "28rem"

collapsedWidth?

Ширина свёрнутой полосы

Тип string·По умолчанию "4rem"

mobileExpandedHeight?

Высота раскрытой строки на телефоне

Тип string·По умолчанию "500px"

stiffness?

Жёсткость пружины

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

damping?

Затухание пружины

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

background?

Цвет фона

Тип string·По умолчанию "#121212"

textColor?

Цвет подписей

Тип string·По умолчанию "#F1F1F1"

imageRadius?

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

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