Infinite Marquee
Бесконечная бегущая строка с плавными краями и паузой на hover — чистый CSS.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| items | string[] | — |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/infinite-marquee.jsonЧто нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
.mq {
--gap: 2.5rem;
--speed: 20s;
display: flex;
overflow: hidden;
width: 100%;
/* overflow: hidden обрезает КАРТИНКУ, но не отменяет вклад содержимого в max-content:
у трека width: max-content, поэтому в центрирующем гриде или во флексе родитель
раздувается до суммарной длины лент и лента вылезает за экран. Изоляция размера
по инлайн-оси отвязывает ширину от содержимого — этого достаточно. */
contain: inline-size;
gap: var(--gap);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mq__track {
display: flex;
flex-shrink: 0;
gap: var(--gap);
align-items: center;
min-width: max-content;
animation: mq-scroll var(--speed) linear infinite;
}
.mq:hover .mq__track {
animation-play-state: paused;
}
.mq__item {
font-size: 1.5rem;
font-weight: 600;
white-space: nowrap;
color: oklch(0.7 0.02 265);
}
@keyframes mq-scroll {
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@media (prefers-reduced-motion: reduce) {
.mq__track {
animation: none;
}
}
import "./infinite-marquee.css";
/** Бесконечная бегущая строка (CSS). Пауза на hover. Дублирует контент для бесшовной петли. */
export function InfiniteMarquee({ items }: { items: string[] }) {
const track = (
<div className="mq__track" aria-hidden="true">
{items.map((it, i) => (
<span className="mq__item" key={i}>
{it}
</span>
))}
</div>
);
return (
<div className="mq">
{track}
{track}
</div>
);
}
