Run Rob Run：使用 Three.js 和 WebGPU 构建音乐响应式黏液

Run Rob Run is a one-page portfolio built around motion, sound, typography, and interaction. The main scene is a custom goo object that behaves like a digital material: it idles, reacts to music, responds to hover, and transforms through scroll from an organic blob into a structured cube.

Run Rob Run 是一个围绕动效、声音、排版和交互构建的单页作品集。主场景是一个自定义的 goo 对象，其行为类似于数字材质：它处于空闲状态、对音乐做出反应、响应悬停，并通过滚动从有机团块变形为结构化的立方体。

The project came out of a long cycle of building, scrapping, rebuilding, and never quite feeling like the work was ready to represent me properly. For years, I kept restarting portfolio ideas before they had a chance to become finished. This version is not about calling the site perfect. It is about finally reaching something I can sit with, share, and keep building from.

这个项目源于一个漫长的构建、废弃、重建的循环，并且总觉得作品还没有准备好来恰当地代表我。多年来，我在作品集想法有机会完成之前，就不断重新开始。这个版本并不是要宣称这个网站完美无缺。而是关于终于达到了一种我可以安心接受、分享并在此基础上继续构建的状态。

That feeling shaped a lot of the design decisions. I wanted the site to feel personal without becoming too polished or distant. The motion needed to have weight. The typography needed to feel direct. The goo needed to feel alive enough to carry the emotion of the page, but controlled enough that it still worked as an interface.

这种感觉塑造了许多设计决策。我希望网站感觉亲切，而不会变得过于精致或疏远。动效需要有重量感。排版需要感觉直接。goo 需要感觉足够生动以承载页面的情感，但又需要足够受控，使其仍能作为界面正常工作。

This breakdown focuses on the goo: how it is structured, how scroll pushes it from blob to cube, and how the music reaction is shaped so the movement feels musical rather than chaotic.

本次拆解重点关注 goo：它的结构方式，滚动如何将其从团块推至立方体，以及如何塑造音乐反应，使运动感觉富有乐感而非混乱。

The scene uses Three.js/WebGPU for the main experience, with layered geometry, custom deformation logic, music-reactive behaviour, scroll state, and a few surface details such as hover readouts and animated dust.

该场景使用 Three.js/WebGPU 打造主要体验，包含分层几何体、自定义变形逻辑、音乐反应行为、滚动状态，以及一些表面细节，如悬停读数和动画灰尘。

Concept

概念

The aim was not to make a background animation. I wanted the scene to feel like an object with presence. Something tactile, imperfect, and responsive. The goo became the em...