Промо-сцены
Абзац с бегущим маркером
Крупный абзац проявляется слово за словом из размытия, а когда собрался — по нему начинает ходить маркер: подсветка по очереди переезжает с одной смысловой фразы на другую и идёт по кругу.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- текст абзаца в пропе text
- набор подсвечиваемых фраз highlights — это слова из того же абзаца, не индексы
- цвет подсветки через проп accent под свой бренд
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью

Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/text-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Text002 text="Мы превращаем идеи в интерфейсы, где движение создаёт ясность." highlights={["идеи в интерфейсы", "создаёт ясность"]} interval={1.8} />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Акцент
accent· по умолчанию: цвет темы- Цвет слов под маркером
accentText· по умолчанию: цвет темы- Секунд на фразу
interval· по умолчанию: 1.8
Ещё в разделе «Промо-сцены»
Частые вопросы
- Как установить компонент «Абзац с бегущим маркером» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Абзац с бегущим маркером»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Абзац с бегущим маркером»?
- Можно менять: текст абзаца в пропе text; набор подсвечиваемых фраз highlights — это слова из того же абзаца, не индексы; цвет подсветки через проп accent под свой бренд. Сохранить как есть: локальную палитру --vibeui-text-002-* — не подменяйте её токенами вашей темы; проявление по словам: сдвиг снизу, размытие и прозрачность за 550 мс с задержкой 45 мс на слово; переезд маркера пружиной scaleX 0.78 → 1 за 300 мс — от него зависит характер подсветки.
- Компонент «Абзац с бегущим маркером» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/text-002.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-text-002-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark. Абзац приходит одной строкой в пропе text и разбирается на слова здесь же; подсвечиваемые куски задаются словами в highlights, а не индексами: компонент ищет фразу как подряд идущую цепочку слов, сравнивая их без окружающей пунктуации. Проявление — @keyframes на каждом слове: translateY(30%) → 0, blur(10px) → 0, прозрачность 0 → 1 за 550 мс по cubic-bezier(0.16,1,0.3,1), задержка calc(45 мс * индекс слова). Маркер — абсолютная подложка под словом с отрицательным z-index (слово держит isolation:isolate, иначе подложка ушла бы за фон абзаца); у слова в середине фразы она дотянута вправо на 0.3em, чтобы пробел между словами тоже был закрашен. Переезд маркера — transition scaleX 0.78 → 1 и прозрачности за 300 мс по пружине, выписанной точками в linear(). Очередь фраз ведёт клиентский таймер: он вступает после того, как абзац дособрался, и дальше переключает фразу каждые interval секунд по кругу. При prefers-reduced-motion таймер не запускается, а вся подсветка показана сразу. Слово под маркером меняет цвет на акцентный (--vibeui-text-002-accent-text, 300 мс), а сама подложка держится светлее акцента — акцентный по акцентному не читался бы. Включённое состояние подсветки приходит инлайном (opacity, transform и цвет слова), а не правилом на data-атрибут: перерисовка меняет атрибуты слова и его подложки разом, и такое правило пересчитывалось с отставанием на шаг. Атрибуты data-on и data-edge остаются в разметке как точка зацепа для чужих стилей.
Теги
- text
- animated text
- paragraph
- highlight
- marker
- blur
- reveal
- stagger
- words
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…