← All components Voice & listening
VoiceOrb
ChatGPT/Anthropic-style pulsating gradient orb. Idle/listening/thinking/speaking/error states; amplitude-reactive.
Inspired by ChatGPT voice mode orb, Claude voice mode, Siri.
Preview
What it looks like.
Live — the real component, scoped to this frame.
Usage
Drop it into your app.
import { VoiceOrb } from '@locara/components'
<VoiceOrb state={voiceState} level={rmsLevel} size={200} />
Or copy the source into your repo:
locara add voice-orb
Design notes
Why it works this way.
Pure CSS — no canvas or WebGL. Looks good at sizes from 80px to 360px. Use as the centerpiece in a ListeningSurface (centered, ~200px) or as a small indicator (~48px).