Заголовок, который собирается, как игровой автомат: при появлении на экране каждая буква прокручивается вверх через столбик собственных копий и замирает на месте. Центральные буквы стартуют первыми, а волна задержки расходится к краям.
Анимация запускается каждый раз, когда строка попадает в область видимости. Задержку волны и длительность прокрутки можно настроить пропсами.
Скопируйте эти файлы в components/rolling-letters/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { RollingText } from "@/components/rolling-letters/rolling-letters";
export function Title() {
return <RollingText text="КОМПОНЕНТЫ" speed={0.05} duration={4} className="text-7xl font-bold" />;
}text?Текст строки
Тип string·По умолчанию "ROLLING"
speed?Задержка волны между соседними буквами в секундах
Тип number·По умолчанию 0.1
duration?Длительность прокрутки в секундах
Тип number·По умолчанию 4
className?Классы строки
Тип string·По умолчанию "text-5xl sm:text-7xl lg:text-8xl font-bold"
style?Инлайн-стили строки
Тип CSSProperties