## Voice Orb (S—051)

A voice-input button: a glowing orb, a live waveform while listening and a breathing pulse while thinking.

- URL: https://sundaeui.dev/components/voice-orb
- Category: UI components · Art direction: Futuristic
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/voice-orb.json`
- Tags: agent, assistant, voice, animated, microphone, ai

Three states in one control. Idle shows a mic; listening spins the orb and drives a waveform; thinking breathes until you hand back control.
Pass a real input level (0–1) from the Web Audio API and the bars follow your voice.

### Usage

```tsx
import { VoiceOrb } from '@/components/sundae/voice-orb'

<VoiceOrb state={state} onStateChange={setState} level={micLevel} />
```

### Props

- `state` (`'idle' | 'listening' | 'thinking'`): Controlled state.
- `onStateChange` (`(s) => void`): Called when pressed.
- `level` (`number`): Live mic level 0–1.
- `bars` (`number`, default `24`): Waveform bars.
- `hue` (`'iris' | 'ember' | 'mint'`, default `'iris'`): Gradient.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Voice assistants, dictation and agent UIs.

### When not to use

- As the only way to give input: always pair with a text field.

### Accessibility

- A toggle button (aria-pressed) named "Start/Stop voice input".
- The state label is a polite live region.
- Reduced motion freezes the orb and shows static bars.

### Keyboard

- Enter / Space: Start or stop listening