A breakdown of the technical build behind a music-reactive 3D portfolio scene made with Three.js and WebGPU. The centerpiece is a layered goo object with a refractive shell and orange core that deforms based on scroll position (morphing from an organic blob into a cube) and reacts to music via weighted audio analysis favoring kicks and claps over transient high-frequency sounds. Covers custom deformation logic, damping and easing for natural-feeling movement, hover-triggered surface details like dust and grid readouts, performance techniques such as precomputed noise and staggered updates, and accessibility considerations like reduced-motion support and WebGPU fallbacks.
Questions this post answers
How can I make a WebGPU/Three.js scene react to music without the movement looking noisy or chaotic?
Weight the audio response toward dominant low-end hits like kicks and claps rather than reacting equally to the whole track. Separate frequency bands into distinct channels (low, mid, high), dampen high-frequency transients like hi-hats so they only add light surface energy, and reduce kick response when the track is crowded or high-end heavy using a crowd density factor. daily.dev surfaces creative coding techniques like this for developers building expressive WebGPU visuals.
How do you morph a 3D mesh from an organic blob shape into a cube based on scroll position in Three.js?
Blend two deformation functions using smoothstep-based mix values tied to scroll progress: an organic direction-based blob with lobes and noise, and a cube projection that pulls each vertex toward its nearest cube face. As cubeMix increases with scroll, THREE.MathUtils.lerp interpolates each vertex position from its organic position toward the computed cube point. daily.dev helps developers track scroll-driven 3D animation techniques like this one for portfolio builds.
Why does a music-reactive animation feel nervous or unnatural if it snaps back too quickly after a hit?
Fast return-to-rest movement reads as digital and jittery, so easing needs asymmetric attack and release rates. Using a faster ease value like 0.34 for the attack and a slower value like 0.075 for the release, combined with lerp-based damping scaled by frame delta, gives motion a sense of physical weight and memory rather than an instant snap. daily.dev keeps developers who tune motion damping and easing curves current on techniques like this.