AI Voice Orb: React + Tailwind Component

A Siri-style voice orb with four states — breathing while idle, undulating while listening, spinning while thinking, and pulsing while speaking.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/ai-voice-orb.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Statestate

Color themepalette

Sizesize

220

Show the status textshowLabel

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AiVoiceOrb/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/ai-voice-orb.en.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 descriptive aria-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

AI Voice Orb