Voice orbPro
A living orb for voice assistants: idle, listening, thinking and speaking states.
When to use
- Voice assistants and call screens.
When not to use
- Text chat: use a typing indicator.
Installation
Usage
Import it from @/components/ui/voice-orb after installing.
example.tsx
import { VoiceOrb } from "@/components/ui/voice-orb";
<VoiceOrb state={state} level={micLevel} />API reference
VoiceOrb
An animated orb that reflects the assistant's state.
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "listening" | "thinking" | "speaking" | – | Current state; announced. |
| level | number | 0 | 0–1 loudness for listening and speaking. |
| size / colors | number / [string, string, string] | 160 | Look. |
Accessibility
- role="status" announces the state as text.
Motion
- Idle breathes; listening and speaking swell with level; thinking swirls fast with a dashed ring.
Responsive behavior
- Fixed size; scale with the size prop.
Performance
- Two rotating gradients; drive level from an AnalyserNode at ~10–20 fps.
Notes for AI
- Smooth the level before passing it in to avoid jitter.
This page as Markdown, for assistants and coding agents:
/components/voice-orb/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt