--- title: "Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU" url: https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p source_url: https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu type: article source: "Codrops" published: 2026-08-20T13:37:01.012Z updated: 2026-08-20T13:42:29.007Z tags: ["threejs", "webgpu", "creative-coding"] reading_time: 9 upvotes: 2 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU **[Codrops](https://daily.dev/sources/codrops)** · 9 min read · 2 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## 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._ ## Similar posts on daily.dev - [Weisdevice: Crafting a Glitched-Out World Between 2D, 3D, and Sound](https://daily.dev/posts/weisdevice-crafting-a-glitched-out-world-between-2d-3d-and-sound-tv67udwni) · Codrops · 2 upvotes · 0 comments - [Exploring Procedural Geometry with Three.js and WebGPU](https://daily.dev/posts/exploring-procedural-geometry-with-three-js-and-webgpu-fmy1y3gze) · Codrops · 1 upvotes · 0 comments --- Tags: [#threejs](https://daily.dev/tags/threejs), [#webgpu](https://daily.dev/tags/webgpu), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p)