Problem
A music catalog lived outside the portfolio as studio assets and HTML experiments. There was no native way to demonstrate creative systems engineering — audio graph, lyric timing, and generative 3D — inside the same editorial product used for job applications.
Approach
Ship a dedicated /music route that composes a client player, lyrics DB, and audio-reactive scenes. Keep large audio binaries out of git via a symlink/CDN base URL; keep the portfolio homepage as the resume sheet.
Decisions
- Web Audio analyser feeds frequency/waveform buffers into R3F useFrame scenes (particles, bars, waveform, hybrid, lyrics field).
- Lyric sync runs on a short interval against timestamped lines; load tokens invalidate stale play/ended callbacks on track switch.
- Render Me On Demand teaser sits in the idle/info surface so the creative pipeline is visible even before playback.
- Editorial tokens (ink/paper/mono chrome) wrap the player so /music reads as part of the sheet system, not a bolted-on demo.
Outcome
Live route at /music with playback, 3D visualizer modes, lyrics DB, and RMOD teaser. Documented in docs/MusicPlayer.md with asset linking via scripts/link-music-assets.sh.
What I'd do differently
Production audio still needs a CDN/blob strategy (NEXT_PUBLIC_MUSIC_BASE_URL) so deploys do not depend on a local studio symlink. A lighter mobile visualizer profile would reduce GPU cost further.