Emotion Soundscape

Emotion Soundscape is a single-page web application built with Next.js, Tone.js, and React Three Fiber. It invites users to select an emotion and be immersed in a pulsing world of synchronized sound and visuals.

• Creates a meditative space where users explore emotional states through interactive audio-visual feedback.
• Choose from 16 emotions, each triggering a distinct soundscape with its own melody, chord progression, drum groove, and synth character.
• Built a procedural music engine with Tone.js — sampled drums and piano, layered synths, sidechain compression, and automated intro/build/drop/breakdown sections, all sequenced on a shared transport clock.
• Adjust intensity and beat speed to shape the mood in real time, modulating volume, filters, reverb, delay, and visual amplitude from a single control surface.
• Sound and visuals stay in sync through a custom audio-to-visual event bridge — each drum hit and melodic note emits a typed event (layer, velocity, frequency) from Tone.js callbacks, so the 3D scene reacts sample-accurately without FFT analysis or perceptible lag.
• Rendered an immersive React Three Fiber wavefield of 16,000+ points, where each audio layer maps to its own spatial pattern: kick ripples from center, snare as expanding rings, bass on the outer band, hi-hats as grain, and melodic layers as pitch-driven directional wedges.
• Melodic pitch drives color and motion — note frequency maps to azimuth angle and warm/cool hue, so the landscape shifts as the harmony moves.
• Deployed to Vercel from a GitHub repo with a Next.js App Router frontend.

Technology

• Next.js - React framework for production
• React Three Fiber - React renderer for three.js
• Tone.js - Web Audio framework
• Vercel - platform for deploying and hosting
• shadcn/ui - beautifully-designed, accessible components and a code distribution platform