Вертикальное меню из крупных жирных надписей. При наведении на пункт каждая буква уезжает вверх, а на её место снизу выкатывается такая же, так что слово будто перекатывается на барабане.
Буквы стартуют не одновременно: задержка растёт от центра слова к краям, поэтому движение расходится волной. Направление волны и шаг задержки можно поменять, а компонент TextRoll доступен и отдельно для любых надписей.
Скопируйте эти файлы в components/text-roll-nav/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { TextRollNav } from "@/components/text-roll-nav/text-roll-nav";
const ITEMS = [
{ name: "Главная", href: "/" },
{ name: "Компоненты", href: "/components" },
{ name: "Цены", href: "/pricing" },
];
export function Navigation() {
return <TextRollNav items={ITEMS} />;
}itemsПункты меню { name, href, description? }
Тип TextRollNavItem[]
center?Волна от центра слова, иначе слева направо
Тип boolean·По умолчанию true
stagger?Задержка между буквами в секундах
Тип number·По умолчанию 0.035
fontSize?Размер букв в пикселях
Тип number
color?Цвет текста, по умолчанию цвет темы
Тип string
gap?Отступ между пунктами в пикселях
Тип number
uppercase?Писать пункты заглавными буквами
Тип boolean·По умолчанию true
className?Классы списка
Тип string