Voice Orb
A voice-assistant orb of concentric wobbling rings — idle breathes, listening reacts to amplitude, thinking swirls, and speaking folds the rings into a rotating wireframe sphere.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/voice-orb.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/voice-orb.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "listening" | "speaking" | "thinking" | "idle" | Conversation state — drives the orb's motion character. |
| level | number | — | External amplitude 0–1 (e.g. from an AnalyserNode). Overrides the simulated envelope. |
| size | number | 160 | Orb diameter in px. |
| color | string | themed ink | Ring color — defaults to the themed ink and flips with the theme. |
| className | string | — | Additional CSS classes. |