Лента бесконечно прокручивает любые элементы — логотипы, отзывы, карточки. Количество копий подбирается под ширину контейнера, поэтому шов не виден, а края мягко затухают.
При наведении лента замедляется или останавливается, её можно схватить и протянуть мышью или пальцем, а после броска она продолжает движение по инерции и возвращается к своей скорости. При фокусе с клавиатуры движение останавливается.
Скопируйте эти файлы в components/marquee/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { Marquee } from "@/components/marquee/marquee";
export function Logos() {
return (
<Marquee speed={36} gap={40} draggable>
<span>GitHub</span>
<span>Figma</span>
<span>Slack</span>
</Marquee>
);
}childrenЭлементы ленты
Тип ReactNode
speed?Скорость в пикселях в секунду
Тип number·По умолчанию 40
direction?Направление движения
Тип "left" | "right" | "up" | "down"·По умолчанию "left"
pauseOnHover?Поведение при наведении
Тип "slow" | "stop" | false·По умолчанию "slow"
draggable?Перетаскивание и бросок с инерцией
Тип boolean·По умолчанию false
paused?Остановить ленту
Тип boolean·По умолчанию false
gap?Отступ между элементами в пикселях
Тип number·По умолчанию 16
fade?Затухание по краям
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string
trackClassName?Классы дорожки с элементами
Тип string