Компоненты/Титры в перспективе

Титры в перспективе

29 сентября 2026

Длинный абзац наклонён в 3D-перспективе и при прокрутке уплывает вглубь экрана, как вступительные титры космической саги.

Установка

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

Файлы

perspective-crawl-text.tsx
НазадОдометрДалееСлот-машина букв

Длинный абзац крупным шрифтом наклонён назад в 3D-перспективе, как вступительные титры космической саги. Прокручивайте вниз — текст уплывает вглубь экрана, а нижняя часть растворяется в фоне.

Сдвиг текста напрямую связан с прогрессом прокрутки внутреннего контейнера. Угол наклона, глубину перспективы, стартовый сдвиг, цвет и размер шрифта можно настроить пропсами.

Вручную

Скопируйте эти файлы в components/perspective-crawl-text/:

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

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

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

import { PerspectiveCrawlText } from "@/components/perspective-crawl-text/perspective-crawl-text";

export function Intro() {
return (
  <div className="h-dvh">
    <PerspectiveCrawlText hint="листайте вниз" tilt={30}>
      Давным-давно в далёкой галактике интерфейсов...
    </PerspectiveCrawlText>
  </div>
);
}

Пропсы

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

Текст титров

Тип ReactNode

hint?

Подсказка над титрами

Тип ReactNode·По умолчанию "scroll down to see"

startOffset?

Сдвиг текста вниз до начала прокрутки в пикселях

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

tilt?

Угол наклона текста в градусах

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

perspective?

Глубина перспективы в пикселях

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

color?

Цвет текста

Тип string·По умолчанию цвет бренда

fontSize?

Размер шрифта в пикселях

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

className?

Классы прокручиваемого контейнера

Тип string

textClassName?

Классы блока с текстом

Тип string