Под огромным закреплённым заголовком прокручивается шахматная сетка портретов команды. Каждый портрет вырастает из нижнего левого или правого угла, когда въезжает в экран, держится в полный размер и снова сжимается в угол, уходя вверх.
Заголовок нарисован в режиме исключения цвета, поэтому над фото он инвертируется и остаётся читаемым. Под каждым портретом — имя и должность, а при наведении фото чуть уменьшается.
Скопируйте эти файлы в components/team-scroll-showcase/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { TeamScrollShowcase } from "@/components/team-scroll-showcase/team-scroll-showcase";
const members = [
{ name: "Анна", title: "Дизайн", origin: "left" as const, photo: "/photos/anna.webp" },
{ name: "Олег", title: "Код", origin: "right" as const, photo: "/photos/oleg.webp" },
];
export function Team() {
return <TeamScrollShowcase members={members} layout={[[0, null, 1, null]]} heading="Команда" />;
}membersУчастники: name, title, photo и угол роста origin
Тип TeamMember[]
layout?Сетка: индексы участников по строкам, null — пустая клетка
Тип (number | null)[][]·По умолчанию TEAM_SCROLL_LAYOUT
heading?Закреплённый заголовок
Тип string·По умолчанию "Спикеры"
date?Подпись под заголовком
Тип string·По умолчанию "22 окт 2025"
hint?Подсказка сверху
Тип string·По умолчанию "прокрутите вниз для эффекта"
headingSize?Размер заголовка, px
Тип number·По умолчанию 128
grayscale?Чёрно-белые портреты
Тип boolean·По умолчанию true
contrast?Контраст портретов
Тип number·По умолчанию 1.2
container?Прокручиваемый контейнер
Тип RefObject<HTMLElement | null>·По умолчанию окно
className?Классы корневого блока
Тип string