Real-Time Audio-Reactive 3D Orb — Vue Component

Overview Built a real-time audio-reactive 3D orb component for an AI voice assistant interface. The orb responds to microphone input by deforming and animating in sync with speech, giving users a clear visual cue that the AI is listening and processing.

The Challenge The client needed a polished, embeddable Vue component that could sit on top of any interface with full transparency — no dark backgrounds, no visible canvas edges, just a floating 3D orb that comes alive when audio is detected. It also had to be lightweight enough to integrate into an existing React/Vue app via a single <SplineOrb> tag.

Vue 3 + Vite component wrapping the Spline 3D runtime

Web Audio API integration analyzing 4 frequency bands (sub, bass, mid, high) in real time using an exponential moving average for smooth transitions

Direct manipulation of Spline's internal noise displacement layers — bass drives deformation intensity, mid/high drive movement speed

WebGL context transparency via prototype-level interception, making the canvas fully transparent on any background

Silence detection with configurable threshold and decay timer, so the orb transitions smoothly back to idle

Clean props API: size controls display size, bands accepts audio data from any external source (mic or LiveKit stream)

Result A single-file component that drops into any Vue or web app, renders a responsive 3D orb with zero visible background, and reacts to voice in under 16ms latency.