Каждая строка стоит на своей грани воображаемого барабана, повёрнутого к зрителю. При прокрутке страницы барабан вращается вокруг горизонтальной оси: строки по очереди поднимаются снизу, выходят на передний план и уходят назад, скрывая обратную сторону.
Барабан закреплён по центру экрана, пока длится прокручиваемый участок, поэтому весь текст читается как одна фраза, собранная из вращения.
Скопируйте эти файлы в components/rolling-text-3d/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { RollingText3D } from "@/components/rolling-text-3d/rolling-text-3d";
export function Manifest() {
return <RollingText3D lines={["Делаем", "сложное", "простым."]} radius={180} height="250vh" />;
}lines?Строки на гранях барабана
Тип string[]·По умолчанию ROLLING_TEXT_LINES
hint?Подсказка сверху
Тип string·По умолчанию "прокрутите вниз"
height?Длина прокручиваемого участка
Тип string·По умолчанию "300vh"
perspective?Перспектива в пикселях
Тип number·По умолчанию 500
radius?Радиус барабана в пикселях
Тип number·По умолчанию 150
rotateRange?Угол поворота в начале и в конце прокрутки
Тип [number, number]·По умолчанию [-73, 242]
container?Свой прокручиваемый контейнер вместо окна
Тип RefObject<HTMLElement | null>
className?Классы корневого блока
Тип string