BR-Buds — Hear the Impossible

A product launch that behaves like a teardown film. One WebGL canvas serves the whole page, and a 620vh pinned ScrollTrigger runs five sequences through it: the buds turn under studio light, the ear tips and shells separate along their own axes, twenty-seven parts across two earbuds and a case settle into a symmetrical exploded sculpture, sound rings and a particle beam fire between the drivers, and then the magnets pull all of it back together and seat the pair in the case. Nothing bounces. The architecture is the interesting part. Scroll progress is written into a plain mutable object rather than React state, and the scene reads it every frame — so a 620vh scrub drives sixteen earbud parts and eleven case parts without React re-rendering once. Every chapter registers a DOM anchor, and each scene group projects that anchor's bounding rect onto the z=0 plane to place itself, then switches itself invisible when the anchor leaves the viewport. That is how a single canvas also renders four macro material windows, three floating colourways, a wireframe-to-solid spec model and the finale, at the cost of one context. There are no model files and no textures on disk: the brushed alloy, the protective mesh, the circuit board and the wordmark are all drawn procedurally to canvas at boot, and the sound rings, beam, ribbons and dust are GLSL. Obsidian black, Space Grotesk at 164px, and colour used only as light.