--- title: Run Rob Run: Building a Music-Reactive Goo with Three.js... description: 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... canonical: https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU | daily.dev og:description: 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... og:url: https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p og:image: https://api.daily.dev/og/posts/MrUzHhr1P.png og:image:alt: Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU og:image:width: 1200 og:image:height: 630 og:locale: 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 · 3 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 Three.js scene react to music without every sound causing equally large movements? Weight the response toward dominant low-frequency events like kicks and larger claps rather than treating all frequency bands equally. Separate audio input into low, mid, and high channels, dampen high-frequency transients like hi-hats so they only create light surface motion, and reduce kick influence when the mix is crowded or high-end activity is elevated, using values like lowDominance and crowdDensity to balance the response. _daily.dev surfaces creative coding techniques like audio-reactive shaders for developers refining interactive builds._ ### 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 targets using smoothstep functions tied to scroll progress: an organic direction-based blob with lobes and surface noise, and a cube projection where each vertex is pulled toward its nearest cube face. Use THREE.MathUtils.lerp to interpolate vertex positions between the organic and cube points as morphProgress increases, keeping the goo-like character early while landing in a clean cube at full scroll. _developers building scroll-driven 3D interactions can track techniques like this on daily.dev._ ### Why does 3D geometry deformation feel nervous or too digital when reacting to audio impacts? Movement feels nervous when the object returns to its resting shape too quickly after a hit. Using asymmetric easing, where impact attacks fast (an ease value like 0.34) but releases slowly (around 0.075), combined with THREE.MathUtils.lerp and a damping curve tied to delta time, gives the object a heavier, more physical feel as it settles. _daily.dev helps developers compare damping and easing patterns used in real-time 3D animation work._ ## Similar posts on daily.dev - [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 - [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 - [Three.js Port Of Evan Wallace's WebGL Water](https://daily.dev/posts/three-js-port-of-evan-wallace-s-webgl-water-gw0cdt6bw) · 80 LEVEL · 3 upvotes · 0 comments - [Bypassing the DOM: How We Built a 60 FPS GPU Playground in React](https://daily.dev/posts/bypassing-the-dom-how-we-built-a-60-fps-gpu-playground-in-react-bjjoodryo) · Medium · 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p"},"datePublished":"2026-08-20T13:37:01.012Z","dateModified":"2026-09-14T07:31:33.156Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1ed52c11d2ba73fad509e35e53ae53d3?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1ed52c11d2ba73fad509e35e53ae53d3?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"threejs,webgpu,creative-coding","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu-mruzhhr1p#faq","mainEntity":[{"@type":"Question","name":"How can I make a Three.js scene react to music without every sound causing equally large movements?","acceptedAnswer":{"@type":"Answer","text":"Weight the response toward dominant low-frequency events like kicks and larger claps rather than treating all frequency bands equally. Separate audio input into low, mid, and high channels, dampen high-frequency transients like hi-hats so they only create light surface motion, and reduce kick influence when the mix is crowded or high-end activity is elevated, using values like lowDominance and crowdDensity to balance the response. daily.dev surfaces creative coding techniques like audio-reactive shaders for developers refining interactive builds."}},{"@type":"Question","name":"How do you morph a 3D mesh from an organic blob shape into a cube based on scroll position in Three.js?","acceptedAnswer":{"@type":"Answer","text":"Blend two deformation targets using smoothstep functions tied to scroll progress: an organic direction-based blob with lobes and surface noise, and a cube projection where each vertex is pulled toward its nearest cube face. Use THREE.MathUtils.lerp to interpolate vertex positions between the organic and cube points as morphProgress increases, keeping the goo-like character early while landing in a clean cube at full scroll. developers building scroll-driven 3D interactions can track techniques like this on daily.dev."}},{"@type":"Question","name":"Why does 3D geometry deformation feel nervous or too digital when reacting to audio impacts?","acceptedAnswer":{"@type":"Answer","text":"Movement feels nervous when the object returns to its resting shape too quickly after a hit. Using asymmetric easing, where impact attacks fast (an ease value like 0.34) but releases slowly (around 0.075), combined with THREE.MathUtils.lerp and a damping curve tied to delta time, gives the object a heavier, more physical feel as it settles. daily.dev helps developers compare damping and easing patterns used in real-time 3D animation work."}}]} ```