Real-Time Audio-Reactive 3D Orb — Vue Component by Angel J.Real-Time Audio-Reactive 3D Orb — Vue Component by Angel J.

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

Angel J.

Angel J.

Verified

Spline Orb Audio Visualizer — Interactive 3D 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.
What I Built
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.
Like this project

Posted May 30, 2026

Built a Vue 3 component that animates a Spline 3D orb in real time using Web Audio API, deforms on voice, transparent on any background, drops in with one tag.

Likes

2

Views

6

Timeline

May 21, 2026 - May 30, 2026

Clients

Rechitta