Carousel

Logo Marquee

Бегущая лента логотипов: список продублирован и сдвигается ровно на половину, поэтому шва между повторами не видно.

carousel
marquee
logos
animation

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/carousel-004

Нам доверяют

Полёт
Северянка
Контур
Ижевск Групп
Мурманская линия
Заря
Полёт
Северянка
Контур
Ижевск Групп
Мурманская линия
Заря

Подпись

Секунд на проход

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «carousel-004» (Logo Marquee) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/carousel-004.json

Registry item: https://vibeui.ru/r/carousel-004.json
Ставится в: components/vibeui/carousel-004.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Бегущая лента логотипов: список продублирован и сдвигается ровно на половину, поэтому шва между повторами не видно.

Бесшовная бегущая лента: дублированный список, сдвиг на половину ширины, пауза по наведению и подтёртые края. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Carousel004 } from "@/components/vibeui/carousel-004"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-carousel-004-* и не подменять её токенами вашей темы
- дублирование списка и сдвиг ровно на половину — иначе виден шов
- aria-hidden на копии: скринридер должен прочитать список один раз
- паузу по наведению: движущийся текст иначе невозможно прочитать
- маску по краям — лента должна выезжать из ничего, а не обрываться
- правило prefers-reduced-motion, заменяющее движение прокруткой

## 6. Можно менять
- массив items — названия или логотипы
- duration — секунд на полный проход
- label — подпись над лентой
- расстояние между элементами

## 7. Правила
- Быстрее двадцати секунд лента начинает рябить: это порог читаемости, а не вкусовая настройка.
- Движущийся текст мешает при дислексии и вестибулярных нарушениях: не ставьте ленту рядом с важным содержимым.
- Логотипы вставляйте как <img> внутрь элементов списка — размеры не заданы намеренно.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/carousel-004.json

https://vibeui.ru/r/carousel-004.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-carousel-004-*. Серверный: хуков нет. Список выводится дважды, вторая копия помечена aria-hidden, анимация сдвигает ленту на половину ширины — так повтор бесшовный. Края подтёрты mask-градиентом. При prefers-reduced-motion анимация выключается, а лента превращается в обычную прокрутку.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Carousel004Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  items?: string[]
  label?: string
  /** Секунд на полный проход ленты. Меньше 20 — рябит в глазах. */
  duration?: number
}

// Идея компонента: бегущая лента логотипов. Список дублируется в разметке и
// сдвигается на половину ширины — только так шов между повторами не виден.
// Копия помечена aria-hidden: скринридер должен прочитать список один раз.
// При prefers-reduced-motion лента останавливается и просто прокручивается.
const STYLES = `
:where([data-vibeui-block="carousel-004"]){
--vibeui-carousel-004-bg:oklch(1 0 0);
--vibeui-carousel-004-fg:oklch(0.35 0.014 265);
--vibeui-carousel-004-muted:oklch(0.58 0.014 265);
--vibeui-carousel-004-border:oklch(0.91 0.006 265);
--vibeui-carousel-004-duration:32s;
--vibeui-carousel-004-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="carousel-004"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:30rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-carousel-004-bg);
border:1px solid var(--vibeui-carousel-004-border);border-radius:0.875rem;
font-family:var(--vibeui-carousel-004-font);color:var(--vibeui-carousel-004-fg);
}
[data-vibeui-block="carousel-004"] [data-part="label"]{
font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase;
color:var(--vibeui-carousel-004-muted);
}
/* Края подтёрты маской: лента должна выезжать из ничего, а не обрываться. */
[data-vibeui-block="carousel-004"] [data-part="window"]{
overflow:hidden;
mask:linear-gradient(to right,transparent,oklch(0 0 0) 8%,oklch(0 0 0) 92%,transparent);
}
[data-vibeui-block="carousel-004"] [data-part="rail"]{
display:flex;width:max-content;gap:2rem;
margin:0;padding:0;list-style:none;
animation:vibeui-carousel-004-run var(--vibeui-carousel-004-duration) linear infinite;
}
[data-vibeui-block="carousel-004"] [data-part="rail"]:hover{animation-play-state:paused}
[data-vibeui-block="carousel-004"] [data-part="item"]{
flex:none;font-size:0.9375rem;font-weight:650;letter-spacing:-0.01em;white-space:nowrap;
}
/* Сдвиг ровно на половину: список продублирован, поэтому шва не видно. */
@keyframes vibeui-carousel-004-run{
to{transform:translateX(calc(-50% - 1rem))}
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="carousel-004"] [data-part="rail"]{animation:none!important}
[data-vibeui-block="carousel-004"] [data-part="window"]{overflow-x:auto;scrollbar-width:thin}
}
`

const DEFAULT_ITEMS = [
  "Полёт",
  "Северянка",
  "Контур",
  "Ижевск Групп",
  "Мурманская линия",
  "Заря",
]

/**
 * Бегущая лента логотипов: список продублирован, копия скрыта от скринридера.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Carousel004({
  items = DEFAULT_ITEMS,
  label = "Нам доверяют",
  duration = 32,
  className,
  style,
  ...props
}: Carousel004Props) {
  const palette = {
    "--vibeui-carousel-004-duration": `${Math.max(20, duration)}s`,
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-carousel-004" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="carousel-004"
        aria-label={label}
        className={className}
        style={palette}
      >
        <p data-part="label">{label}</p>
        <div data-part="window">
          <ul data-part="rail">
            {items.map((item) => (
              <li key={item} data-part="item">
                {item}
              </li>
            ))}
            {items.map((item) => (
              <li key={`copy-${item}`} data-part="item" aria-hidden="true">
                {item}
              </li>
            ))}
          </ul>
        </div>
      </section>
    </>
  )
}