Крупный заголовок из начала фразы и столбика окончаний. При прокрутке он прилипает к верху, постепенно уменьшается и уходит под нарастающее размытие, а окончания одно за другим проезжают мимо начала фразы.
Снизу наезжает тёмная скруглённая панель со списками команды по группам. Сила размытия, итоговый масштаб, цвета и скругление панели настраиваются.
Скопируйте эти файлы в components/sticky-blur-list/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { StickyBlurList } from "@/components/sticky-blur-list/sticky-blur-list";
export function Team() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-[720px] overflow-y-auto" style={{ containerType: "size" }}>
<StickyBlurList
container={scrollRef}
lead="Мы создаём"
phrases={["платформу Astra", "дизайн-систему Astra", "бренд Astra"]}
groups={[{ title: "Дизайн", people: ["Мария Орлова", "Кирилл Романов"] }]}
/>
</div>
);
}leadНачало фразы в заголовке
Тип string
phrasesОкончания фразы
Тип string[]
groupsГруппы команды на панели
Тип { title: string; people: string[] }[]
container?Прокручиваемый контейнер
Тип RefObject<HTMLElement | null>
background?Цвет фона
Тип string·По умолчанию "#f5f4f3"
panelColor?Цвет панели
Тип string·По умолчанию "#121212"
panelTextColor?Цвет текста панели
Тип string·По умолчанию белый
maxBlur?Максимальное размытие заголовка в пикселях
Тип number·По умолчанию 20
endScale?Масштаб заголовка к концу прокрутки
Тип number·По умолчанию 0.5
panelRadius?Скругление панели в пикселях
Тип number·По умолчанию 32
className?Классы корневого блока
Тип string