Voice Orb
Presence for a voice agent, drawn in the primary color. Ten variants: particle mesh, glowing ring, twisting ribbons, soft aura, circular bars, halftone dots, three WebGL shaders (plasma, liquid and glass), and a minimal dot for small spots. All share the same states, speed, glow and sensitivity, and react to voice level. Tune one in the Studio.
Installation
Usage
import { VoiceOrb, VoiceOrbProvider } from "@/components/voice/voice-orb"
<VoiceOrb state="listening" level={level} />
<VoiceOrb variant="ring" state="thinking" />
// Or style every orb in the app once, at the root
<VoiceOrbProvider variant="glass" palette="iris" glow={0.3}>{children}</VoiceOrbProvider>Examples
Variants
particlesringauraplasmaliquidglassbarshalftonewavedotAura palettes
mistirisembercocoaprimaryAPI Reference
VoiceOrb
| Prop | Type | Default |
|---|---|---|
variantVisual style. Omit to use the nearest VoiceOrbProvider. | "particles" | "ring" | "wave" | "aura" | "bars" | "halftone" | "plasma" | "liquid" | "glass" | "dot" | provider, else "particles" |
stateSame meaning on every variant. Connecting breathes; error turns destructive and nearly still. | "idle" | "connecting" | "listening" | "thinking" | "speaking" | "error" | "idle" |
levelLoudness 0 to 1. Smoothed with a spring. | number | 0 |
sensitivityMultiplies level before it moves the orb, capped at 1. Raise it for quiet sources. | number | 1 |
speedAnimation speed multiplier. | number | 1 |
glowSoft light around the orb, 0 to 1. Named aura palettes glow in their own color. | number | 0 |
sizeSize in px. Wave renders 2x wide and 0.6x tall, capped to its container. Dot is built for 16 to 48px. Color follows --primary; override with a text-* class. | number | 160 |
paletteAura, plasma, liquid and glass. A named palette, or four colors: base, then three fields. Primary builds shades of --primary. | "primary" | "iris" | "ember" | "cocoa" | "mist" | string[] | "primary" |
particlesParticles variant only. Approximate count, capped at 6000. | number | size² × 0.07 |
thicknessRing: stroke weight. Glass: how strongly it bends and tints the light. | number | 1 |
glossLiquid and glass: highlight strength. | number | 1 |
blobsLiquid: number of blobs, 1 to 8. | number | 5 |
turbulencePlasma: how strongly the noise warps. | number | 1 |
filamentsPlasma: brightness of the flaring streaks. | number | 1 |
grainAura: film grain strength, 0 to 2. | number | 1 |
barsBars: number of bars. | number | 56 |
densityHalftone: dot grid density multiplier. | number | 1 |
VoiceOrbProvider
| Prop | Type | Default |
|---|---|---|
variantDefault variant for every VoiceOrb inside. | "particles" | "ring" | "wave" | "aura" | "bars" | "halftone" | "plasma" | "liquid" | "glass" | "dot" | – |
palette, glow, speed, sensitivity, …Any style prop except size becomes the default for every orb inside, so one provider at the root styles the whole app. Props on a VoiceOrb win; classes combine. | same as VoiceOrb | – |