Infinite Marquee

Бесконечная бегущая строка с плавными краями и паузой на hover — чистый CSS.

cssautohoverbasic~1 КБreduced-motion ✓

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

Проп	Тип	По умолчанию	Что это
items	string[]	—

Установка

npx shadcn@latest add https://motiva.pages.dev/r/infinite-marquee.json

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

.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>
  );
}

Infinite Marquee

Пропсы

Установка

Экспорт

Код

Похожие эффекты