CASE STUDY · 02
NoirWaveNext.js · TypeScript
A music product built around real audio playback and a cinematic full-screen listening experience.
Live project ↗Private repository
- REALHTML5 audio
- STATEZustand playback
- SYNCfullscreen player
Context
A music product built around real audio playback and a cinematic full-screen listening experience.
Challenge
Keep a real audio engine, playlist state and a cinematic fullscreen player synchronized across a highly animated interface.
Engineering
Next.js, TypeScript, Zustand, native HTML5 audio and Framer Motion coordinate playback state, scrubbing and transitions.
Outcome
A working music experience with real playback rather than a static visual concept.
Technical stack
- Next.js
- TypeScript
- Zustand
- Framer Motion