Три сцены на одной прокрутке. Сначала буквы заголовка разлетаются от центра и повёрнуты в перспективе — по мере прокрутки они съезжаются и выпрямляются в ровную строку.
Затем появляются два ряда иконок сервисов с подписью в фигурных скобках: первый собирается из дуги с увеличением, второй — из веера с наклоном. Цвет букв по умолчанию берётся из акцентного цвета темы.
Скопируйте эти файлы в components/scroll-letters-icons/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ScrollLettersIcons } from "@/components/scroll-letters-icons/scroll-letters-icons";
const icons = ["/logos/figma.svg", "/logos/notion.svg", "/logos/telegram.svg"];
export function Integrations() {
return (
<div className="h-[720px]">
<ScrollLettersIcons text="ещё больше от Astra" icons={icons} caption="подключайте любимые сервисы" />
</div>
);
}iconsАдреса иконок для рядов
Тип string[]
text?Заголовок из разлетающихся букв
Тип string·По умолчанию "see more from Astra"
caption?Подпись над рядами иконок
Тип ReactNode·По умолчанию "intergrate with your fav tech stack"
hint?Подсказка вверху
Тип ReactNode·По умолчанию "Scroll to see more"
accentColor?Цвет букв заголовка
Тип string·По умолчанию цвет --color-brand
letterSpread?Начальный разлёт и поворот букв на шаг от центра
Тип number·По умолчанию 50
fontSize?Размер букв в пикселях
Тип number·По умолчанию 60
className?Классы прокручиваемого контейнера
Тип string