Creating Emotionally Resonant 3D Experiences with Music-Responsive Goo in Three.js and WebGPU

Aug 20, 2026 473 views

In the realm of web design, the project "Run Rob Run" embodies a compelling fusion of motion, sound, and interaction, utilizing Three.js and WebGPU to create a striking auditory and visual experience. The centerpiece is a custom goo object, crafted to behave like a digital material—reacting to sound, responding to user interaction, and morphing through scrolling from an amorphous blob to a defined cube.

This project emerged from a cycle of creation and refinement, marked by repeated iterations. It reflects a journey through various portfolio designs, ultimately reaching a stage where the creator felt a true representation of their artistic vision. Rather than presenting a flawless site, it encapsulates the evolution of thought and design, converging on a form that is both personal and expandable.

Defining the Concept

The emphasis here wasn't on mere background animation; the objective was to instill the scene with presence and tactility. This goo serves as the emotional heartbeat of the site, encapsulating a delicate balance between organic softness and structural integrity. A refractive outer shell envelops a dynamic orange core, creating a visual experience that shifts between the fluid and the geometric.

Design contrasts played a pivotal role:

Fluid, organic motions juxtaposed with a sharp, defined cube.
A transparent shell that surrounds a solid core.
Subtle idle behavior versus pronounced rhythms driven by the music.
Engaging hover responses that reveal additional details only upon user interaction.

To make these ideas work technically, flexibility was vital. The goo couldn't rely on a single mesh approach; it required layers and separate reaction channels to provide varied damping and performance optimization.

Implementation Insights

Structuring the Scene

At its core, the goo is constructed from multiple layered meshes, each employing the same basic deformation techniques yet differing in materials and behaviors:

The outer layer presents a glass-like, refractive effect.
The inner core offers weight and character.
A slim exterior layer adds surface interest and detail.
As the user scrolls, the goo's organic state transitions towards a cube form.
Hover states introduce temporary visual elements, enriching the interactivity.

During each rendering frame, the scroll position, music-reactive values, and damping states are computed, feeding into the deformation functions that determine how each mesh layer behaves.

Transforming Through Scroll

The scroll effect melds two contrasting states—an organic, flowing blob and a structured cube. This deformation method relies on blending techniques:

An organic state reflecting soft, lobe-like features.
A cube-oriented projection that guides each vertex towards its cube counterpart.

As the cube's influence grows, each point is gradually drawn toward its designated cube position, preserving the fluid essence during early interactions while ensuring a tidy geometric end state.

Reacting to Music

Critical to the goo's responsiveness is its selective audio reaction system. The intention was to avoid a uniform response to all sound frequencies—a misstep in early versions led to chaotic movements during complex tracks. Instead, the final design prioritizes reactions to dominant rhythmic elements: bass kicks, prominent claps, and steady drum beats, while softening the response to lighter, higher-frequency sounds.

The system intelligently identifies strong low-end hits, mitigating excessive movement from transient, high-frequency elements. This nuanced approach creates a more controlled and engaging visual response without overwhelming the viewer.

Damping and Weighting Movements

The perception of weight in the goo is crucial. Expedited returns after interactions render the animation too sterile. While impacts can initiate rapidly, the subsequent release must be gradual, reinforcing a sense of physical presence.

Distinct easing parameters ensure larger movements settle gradually, providing a robust feel as the core of the goo interacts with the surrounding space.

Refining User Interaction

After establishing the fundamental behavior, tuning became essential to maintain a balance between expressiveness and clarity. Hover effects were designed to provide immediate feedback without disrupting the overarching morphing narrative. For example, grid displays activate upon hover, offering real-time data while assuring the main animations remain intact.

The motion of dust particles animating under user curoisity complements the scene without drastically increasing computational costs. Precomputed noise frames allow for this visual flair without the burden of rendering new frames in real-time.

Performance Considerations

Through this project, one pivotal realization was that both aesthetic quality and performance stem from intentional restraint, not just added complexity. Notable strategies included precomputing heavy noise where feasible, staggering updates across various object layers, and smoothing out audio reactions before applying them to geometries.

This differentiated approach ensures that each visual layer—outer shell, core, and surface coating—updates with varying intensity, contributing to a coherent, visually appealing rendition that respects the overall clarity of the animation.

Prioritizing Accessibility

Given the interactive and auditory reliance of this project, accessibility emerged as a key concern. The experience is designed to remain navigable even with music playback toggled off, with user-controlled audio integration to avoid automatic triggers. This allows for a more tailored interaction, accommodating varied user preferences.

Hover effects are enhanced features rather than critical elements for navigation. Furthermore, desktop users with coarse pointer devices can seamlessly engage without the hover functionalities, ensuring inclusivity in user experience.

Final Thoughts

The goo system stands as a testament to the balance between artistic direction and meticulous engineering. It attunes to music without being wholly dictated by it, embracing only the impactful elements. The transformative scroll action captures the essence of movement, while hover interactions reveal subtle aspects of the underlying system.

The greatest takeaway from this creation journey has been the understanding that true visual clarity arises not from multiplying effects but from discerning which movements are essential. By damping and isolating responses, the final product embodies a tactile feel that resonates with depth, memory, and physicality.