Текстовая анимация
Абзац с растущей подсветкой
Тот же проявляющийся по словам абзац, но подсветка не бегает по кругу, а накапливается: фразы зажигаются по очереди и стоят все вместе, собранный конспект держится паузу, гаснет целиком — и круг начинается заново.
Что можно поменять
- текст абзаца в пропе text
- набор подсвечиваемых фраз highlights — это слова из того же абзаца, не индексы
- цвет подсветки через проп accent под свой бренд
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/text-003?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --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
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…