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