АнимацииProНовое
Шар голосового ассистента
Переливающийся шар, как у голосовых ассистентов. Дышит в покое, ускоряется, когда «думает», и пульсирует под голос.
Настройки
mainColor
secondColor
highlightColor
Основано на Siri Orb (MIT лицензия) · Условия использования
Параметры
9 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| state | 'idle' | 'listening' | 'thinking' | 'streaming' | 'done' | 'error' | "idle" | Состояние ИИ-ассистента. Меняет скорость, размер и яркость шара. |
| size | string | "192px" | Размер шара в пикселях. |
| animationDuration | number | 20 | Время одного оборота цветов, в секундах. |
| amplitude | number | MotionValue<number> | — | Громкость голоса от 0 до 1. Шар пульсирует в такт. |
| colors | { bg?: string; c1?: string; c2?: string; c3?: string; c4?: string } | — | Цвета фона и четырёх переливов. |
| mainColor | string | "#f8f8f8" | Первый цвет шара, главный. Важнее, чем colors.c1. |
| secondColor | string | "#c4c4c4" | Второй цвет шара, им же светится ореол. Важнее, чем colors.c2. |
| highlightColor | string | "#717171" | Третий цвет шара. Важнее, чем colors.c3. |
| className | string | — | Классы для обёртки. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge