THE
MECHANICS

Under the hood

🎤
01

Input Source

We use the Web Audio API to tap into your device's audio stream. Whether it's your microphone or system audio, we capture the raw data in real-time.

📊
02

Frequency Analysis

The raw audio is processed through a Fast Fourier Transform (FFT). This breaks the sound wave into distinct frequency bands: deep bass, punchy mids, and sparkling highs.

👁️
03

WebGL Rendering

These frequency values are passed as 'uniforms' to our custom GLSL shaders. The GPU calculates millions of particles and liquid physics at 60fps based on the music's energy.

04

Multiplayer Sync

When you're in a room, we sync the track position and visual state across all devices using Convex. Everyone sees the same drop at the exact same moment.

Powered By

NEXT.JS 15 • THREE.JS • WEBGL 2.0 • CONVEX • WEB AUDIO API • TAILWIND CSS • FRAMER MOTION •NEXT.JS 15 • THREE.JS • WEBGL 2.0 • CONVEX • WEB AUDIO API • TAILWIND CSS • FRAMER MOTION •NEXT.JS 15 • THREE.JS • WEBGL 2.0 • CONVEX • WEB AUDIO API • TAILWIND CSS • FRAMER MOTION •NEXT.JS 15 • THREE.JS • WEBGL 2.0 • CONVEX • WEB AUDIO API • TAILWIND CSS • FRAMER MOTION •

ENOUGH TALK.

START VIBING