Плашка
Пульс новинки
Метка «новое» с расходящейся волной: анимируется отдельный слой, поэтому при выключенной анимации точка остаётся на месте.
Что можно поменять
- тон через tone
- число колец через waves
- подпись через children
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/badge-017?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-017-*. Серверный: хуков нет. Маяк собран из двух слоёв — неподвижного ядра и колец, которые расходятся анимацией vibeui-badge-017-ripple; каждое кольцо получает свою задержку через инлайновую переменную --vibeui-badge-017-delay, поэтому волны идут одна за другой, а не мигают вместе. Правило prefers-reduced-motion не просто гасит анимацию, а убирает кольца совсем: застывшее раскрытое кольцо вокруг точки читалось бы как сломанная вёрстка. Тон переключается data-tone и меняет только --hue и --chroma.
Теги
- badge
- new
- pulse
- attention
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…