case study
$ cat ~/cases/studio-75.md
studio-75
Studio 75 is a real music studio — mixing, mastering, production. The brief was one line: make it feel like the music sounds. Dark, textured, alive.
So the site is built around sound, not around a template. A waveform reacts to audio, tracks pull real Spotify data, and a full beat builder lives inside the page.
Audio-reactive waveform
A canvas oscilloscope driven by the Web Audio API — reacts to mic input or track previews, with a synthesized idle wave when nothing plays.
Spotify at build time
Real track metadata and album art pulled via the Spotify client-credentials API during the build — no runtime keys, no client-side calls.
Beat builder
A step sequencer and synth engine built from scratch — kick, snare, hats, bass, all synthesized live and drawn into the waveform.
Scroll-driven motion
Lenis smooth-scroll synced to the GSAP ticker; word-by-word reveals, stat count-ups, and a cinematic loader scene.
Audio-reactive canvas plus smooth-scroll plus GSAP is exactly the mix that makes older laptops wheeze. A dedicated performance pass fixed that without changing a single pixel:
- →the waveform loop pauses when scrolled offscreen instead of rendering forever
- →canvas DPR capped for blur imagery — ~44% fewer pixels on retina, invisible loss
- →gradients built once per resize, not per frame; hover tilts reuse one tween
- →
prefers-reduced-motionrespected — a static frame for those who ask
- →a site that sounds like the studio, live on Vercel
- →zero runtime API keys — Spotify data baked at build
- →smooth on low-end hardware after the optimization pass