АнимацииНовое
Бегущая строка
Бесконечная лента из карточек или логотипов. Едет по кругу без швов и может остановиться при наведении.
Настройки
color
accentColor
highlightColor
Основано на Marquee (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
10 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| children | ReactNode | — | Что прокручивать: карточки, логотипы, отзывы. |
| duration | number | 40 | Сколько секунд длится один круг. Меньше значит быстрее. |
| reverse | boolean | false | Крутить в обратную сторону. |
| pauseOnHover | boolean | false | Останавливать ленту при наведении мыши. |
| vertical | boolean | false | Крутить сверху вниз, а не вбок. |
| repeat | number | 4 | Сколько копий содержимого в ленте, чтобы не было пустот. |
| color | string | "#ffffff" | Основной цвет. Элементы внутри берут его через var(--marquee-c1). |
| accentColor | string | "#a3a3a3" | Второй цвет. Элементы внутри берут его через var(--marquee-c2). |
| highlightColor | string | "#ffffff" | Светлый цвет для бликов. Элементы внутри берут его через var(--marquee-c3). |
| className | string | — | Классы обёртки. Отступ между элементами задаётся через [--gap:2rem]. |
Зависимости
Пакетов: 2
npm install clsx tailwind-merge