Панель показателей
Мини-панель
Компактная панель метрики: число крутится цифровым барабаном, пока не встанет на нужном значении, а мини-спарклайн рядом дорисовывается слева направо; под карточкой дышит радужное свечение.
Что можно поменять
- заголовок метрики, значение value и пилюлю trend под свои данные
- направление тренда через trendTone (up/down) — красит пилюлю
- точки мини-графика через spark под реальный ряд данных
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/dashboard-anim-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-dashboard-anim-001-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark, поэтому в тёмном проекте не остаётся светлым. Число — не просто текст: каждая цифра лежит в своей колонке со стопкой 0–9 и едет вверх, пока не встанет на нужном значении; остальные символы строки (пробел, $, %, запятая) просто проявляются в том же ритме. Мини-спарклайн справа дорисовывается слева направо через stroke-dashoffset, заливка под линией и точка на конце проявляются следом. Цикл бесконечный: досчитав и дорисовав график, панель на мгновение гаснет и считает заново. Настоящее значение продублировано скрытой строкой для скринридера, барабан и график декоративны. Всё гаснет при prefers-reduced-motion.
Теги
- dashboard
- metric
- counter
- sparkline
- chart
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…