Промо-сцены

Абзац с растущей подсветкой

Тот же проявляющийся по словам абзац, но подсветка не бегает по кругу, а накапливается: фразы зажигаются по очереди и стоят все вместе, собранный конспект держится паузу, гаснет целиком — и круг начинается заново.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • текст абзаца в пропе text
  • набор подсвечиваемых фраз highlights — это слова из того же абзаца, не индексы
  • цвет подсветки через проп accent под свой бренд

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Абзац с растущей подсветкой — Тот же проявляющийся по словам абзац, но подсветка не бегает по кругу, а накапливается: фразы зажигаются по очереди и стоят все вместе, собранный конспект держится паузу, гаснет целиком — и круг начинается заново.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/text-003?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

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

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

Загружается…

Как использовать

<Text003 text="Хорошие продукты рождаются, когда ясное мышление встречает внимание к деталям." highlights={["ясное мышление", "внимание к деталям"]} step={0.9} />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Акцент
accent · по умолчанию: цвет темы
Цвет слов под подсветкой
accentText · по умолчанию: цвет темы
Пауза между фразами (с)
step · по умолчанию: 0.9

Частые вопросы

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

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

npx shadcn@latest add https://vibeui.ru/r/pro/text-003.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-text-003-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark. Абзац приходит одной строкой в пропе text и разбирается на слова здесь же; подсвечиваемые куски задаются словами в highlights, а не индексами: компонент ищет фразу как подряд идущую цепочку слов, сравнивая их без окружающей пунктуации. Проявление слова: translateY(30%) → 0, blur(10px) → 0, прозрачность 0 → 1 за 550 мс по cubic-bezier(0.16,1,0.3,1) с задержкой calc(45 мс * индекс слова). Подсветка растёт от левого края (transform-origin:left) — scaleX 0.78 → 1 и прозрачность за 300 мс по пружине, выписанной точками в linear(); слово под ней меняет цвет на акцентный (--vibeui-text-003-accent-text), а подложка держится светлее акцента, иначе акцентный по акцентному не читался бы. Круг ведёт клиентский таймер: он вступает, когда абзац дособрался, зажигает фразы через step секунд, держит собранный конспект 1.8 с, гасит всё разом и после паузы 0.7 с начинает заново. При prefers-reduced-motion таймер не запускается, а весь конспект показан сразу. Включённое состояние подсветки приходит инлайном (opacity, transform и цвет слова), а не правилом на data-атрибут: перерисовка меняет атрибуты слова и его подложки разом, и такое правило пересчитывалось с отставанием на шаг. Атрибуты data-on и data-edge остаются в разметке как точка зацепа для чужих стилей.

Теги

  • text
  • animated text
  • paragraph
  • highlight
  • progressive
  • loop
  • blur
  • reveal
  • stagger
  • words
Исходник компонента

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

Загружается…