AI Voice Orb
A Siri-style voice orb with four states — breathing while idle, undulating while listening, spinning while thinking, and pulsing while speaking.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
An organic blob voice orb drawn on canvas 2d: multiple sine layers perturb the outline, layered with a gradient and a glow, and state drives four modes — breathing slowly while idle, undulating dramatically with the simulated volume while listening, orbiting particles counter-rotating while thinking, and pulsing to a syllable-like rhythm while speaking. State changes cross-fade smoothly through exponential easing, which suits voice assistants and AI conversation interfaces.
npx shadcn@latest add "https://webberui.com/r/ai-voice-orb.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<AiVoiceOrb />
Installation
npx shadcn@latest add "https://webberui.com/r/ai-voice-orb.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/ai-voice-orb.
Usage
import { AiVoiceOrb } from "@/components/ui/ai-voice-orb";
<AiVoiceOrb state="listening" palette="aurora" size={200} showLabel />When pairing it with speech recognition or a streaming reply, just map the recognition and reply lifecycle onto state:
const [state, setState] = React.useState<VoiceOrbState>("idle");
// start capturing audio → setState("listening")
// waiting on the model → setState("thinking")
// playing the reply → setState("speaking")Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | "idle" | "listening" | "thinking" | "speaking" | "idle" | The orb's current state; the animation parameters cross-fade smoothly when it changes |
palette | "aurora" | "sunset" | "ocean" | "mint" | "aurora" | Built-in color theme |
colors | [string, string, string] | — | Custom three-color gradient (primary, secondary, accent); takes precedence over palette |
size | number | 220 | Canvas size (px); the glow and particles are all drawn within it |
showLabel | boolean | false | Whether the current state text is shown beneath the orb |
labels | Partial<Record<VoiceOrbState, string>> | — | Overrides the display text for each state (also used for the aria-live announcement) |
className | string | — | Forwarded to the outer container |
Accessibility
- When the user has "reduce motion" enabled at the system level, it renders a static gradient circle and the state text instead, never starting the canvas animation loop at all
- The canvas has
role="img"and a descriptivearia-label(for example "AI voice orb: listening") - State changes are announced to screen readers through an
aria-live="polite"sr-only region - When the component scrolls out of view an IntersectionObserver pauses the rAF, resuming automatically when it comes back on screen, saving performance and battery