Inspiration

We wanted to make sound feel tangible. The idea came from synesthesia and the feeling of being inside a song instead of just listening to it. We also wanted something playful for a hackathon, a visual that you can fly through, capture, and share as a piece of art.

What it does

LuminaWave turns audio into a 3D trail you can explore. Upload an MP3, paste a YouTube link, or use your mic. The browser runs an FFT and maps bass, mid, and high energy to 3D positions and color. You can fly through the trail with WASD + mouse look, tweak the look (line, ribbon, or particles; straight or curved; point shapes), and capture the moment. Captures are stored and shared as a /art/{id} URL with a generated OpenGraph preview.

How we built it

Next.js 16 (Turbopack), React 19, Tailwind 4 for the UI
Three.js for the 3D scene, with Line2, Points, and InstancedMesh
Web Audio API for decoding and FFT analysis in the browser
Server actions to validate uploads and fetch YouTube audio
Vercel Blob for storing captured artworks (fallback to local filesystem in dev)
Deployed on Vercel with OIDC blob auth in production

Challenges we ran into

Making real-time audio analysis smooth while rendering thousands of trail points
Normalizing very different audio sources (MP3, YouTube, live mic) so the visuals feel consistent
Keeping captures deterministic so a saved artwork replays identically in the static viewer
Building an intuitive fly-through camera with pointer lock and adjustable speed

Accomplishments that we're proud of

A real-time 3D audio visualizer that feels immersive and responsive
Multi-style rendering (line, ribbon, particles) and curve smoothing that change live
One-click capture that reconstructs the artwork from saved trail data
Shareable URLs with auto-generated OpenGraph previews

What we learned

Practical FFT feature extraction and normalization for music vs. mic input
Performance tradeoffs in Three.js for dynamic geometry and large buffers
How to design a capture pipeline that preserves visual state without re-processing audio
Shipping a full stack hackathon app end-to-end on Vercel