Architecture Over Physics: How Isadora Agency Crafted a Tactile Digital Experience Without Engines

When modern front-end developers are tasked with creating a web interface that feels physical—bouncy, squishy, or explosive—the industry default is to reach for a physics engine. Frameworks like Matter.js, Cannon.js, or complex WebGL-based simulations have long been the gold standard for creating immersive, gamified web experiences. However, when the creative team at Isadora Agency set out to build Stress Release, a digital stress-relief toy designed to help burnt-out professionals interact with animated characters, they discovered that physics engines often solve the wrong problem.

In a move that challenged conventional wisdom, the agency chose to abandon physics engines entirely, opting instead for a deterministic architecture rooted in Lottie animations, DOM manipulation, and precise distance-based mathematics. This article explores the technical rationale, the implementation strategy, and the implications of prioritizing intentional art direction over algorithmic simulation.

The Design Requirement: Why Physics Wasn’t the Answer

The core objective of Stress Release was to provide a highly tactile experience where every user click yields a satisfying, controlled reaction. As the team began prototyping, they encountered a fundamental tension between the unpredictable nature of physics engines and the specific demands of their animators.

Physics engines are designed to produce plausible motion. They calculate gravity, friction, and velocity to simulate real-world movement. However, the animators at Isadora had crafted bespoke, high-fidelity JSON Lottie files that demanded intentional motion. For example, a “mega squeeze” reaction required a precise 181-frame build-up followed by a specific, choreographed release sequence.

When a character is squeezed, the animation is not merely a reaction to force; it is an artistic expression of the character’s personality. If the team had used a physics engine, the character’s deformation would have been subject to the engine’s mathematical approximations, which would have overwritten the nuanced, frame-by-frame keyframes created by the artists. To maintain absolute deterministic control, the architecture had to act as a flawless trigger for the animation layer, ensuring that the interaction layer never compromised the integrity of the design.

Chronology of Development: From Simulation to State-Based Logic

The development process began with the traditional assumption that a physics engine was necessary. When that proved insufficient, the team transitioned to a programmatic state-control model.

1. Phase One: Exploration. The team prototyped using standard collision-detection libraries. They quickly found that while objects could "bounce," the interaction felt generic and detached from the brand identity.
2. Phase Two: Architectural Pivot. The team decided to move all rendering to the Lottie runtime, which plays JSON-based vector animations as SVGs within the DOM. By selecting elements via CSS IDs and classes, they could drive behavior using segments rather than forces.
3. Phase Three: Radial Mapping. The team implemented a coordinate-based system where every click is translated into local character space. This allowed the code to calculate the exact distance from the center of a character, enabling a "dartboard" style feedback system.
4. Phase Four: Interaction Layering. The final phase involved defining clear state boundaries—idle loops, reaction frames, and end states—to ensure the interface felt responsive and snappy without needing a physics engine to calculate the "feel."

Supporting Data: The Mathematics of Tactile Feedback

To create the illusion of weight and squishiness, the developers utilized the Pythagorean theorem to map the interaction point to the character’s geometry. By measuring the distance between the center point of the character and the user’s click, the code determines the intensity of the reaction.

// Determining the distance from the click to the center of the character
var x_center = parseFloat($("#playChar").width() / 2);
var y_center = parseFloat($("#playChar").height() / 2);
var offset = $("#playChar").offset();
var X = parseFloat(e.pageX - offset.left);
var Y = parseFloat(e.pageY - offset.top);

var a = X - x_center;
var b = Y - y_center;
var distance = Math.hypot(a, b);

This distance variable becomes the single source of truth. It dictates the point reward (a bullseye yields 100 points, while a glancing blow yields fewer), the intensity of the visual feedback, and the placement of the explosion effect. By dynamically updating the margin-left and margin-top of the explosion Lottie based on these coordinates, the UI provides a sense of spatial accuracy that feels inherently tactile. The user is not just clicking a button; they are hitting a specific zone on a character, and the UI responds accordingly.

Official Perspectives: Controlling the Narrative

The engineering team at Isadora Agency emphasizes that this approach is fundamentally about "controlling the narrative." By moving away from physics-based randomness, they gained the ability to guarantee that every user experiences the exact same "squish" when interacting with a character.

"We didn’t need our characters to act like realistic rubber balls bouncing uncontrollably," explains the lead developer. "We needed them to react in very specific, highly designed ways."

This deterministic approach extends to how they handle state. Because the animation is broken into segments—idle, squeeze1, squeeze2, and squeeze3—the developer can force the animation to jump to specific frames. When a user clicks, the playSegments method is invoked, instantly overriding the current frame to show the reaction. Once the animation completes, the onComplete callback seamlessly returns the character to the idle loop. This creates a feedback loop that is instantaneous, satisfying, and visually identical to what the animator intended.

Technical Implications: Responsiveness and Performance

One of the most significant advantages of this DOM-based architecture is its responsiveness. Unlike WebGL, which often requires complex coordinate remapping to handle different screen sizes, the DOM naturally handles scaling. By using CSS variables to manage the layout, the team ensured that the characters and their hitboxes scale fluidly across devices.

However, this approach is not without its trade-offs. Lottie files can be heavy, especially when managing 21 different character animations simultaneously. To mitigate this, the team implemented specific performance optimizations:

• Quality Throttling: On the "shelf" view where multiple characters are animated at once, the team set the Lottie quality to 0.5 to reduce interpolation calculations.
• Speed Adjustment: By setting the speed to 0.6 on the shelf, they reduced the number of frames requiring calculation per second, freeing up CPU cycles.
• Selective Resolution: In the focused gameplay screen, they pushed the quality to 1.0, ensuring the single active character appeared crisp and fluid.

The Future of Tactile Web Design

The project serves as a compelling case study for modern web development. It challenges the assumption that "more complex" is synonymous with "better." By opting for simple math and native browser capabilities, Isadora Agency successfully created a highly tactile experience that feels bespoke and professional.

The implications for the broader industry are clear: when building high-end brand experiences, the primary goal should be to honor the art direction. Physics engines are powerful tools, but they are not always the right ones. For designers and developers looking to create interfaces that feel alive, the answer may not lie in a more powerful simulation engine, but in a more precise implementation of programmatic state control.

By mapping Lottie’s native timeline capabilities to the DOM, developers can deliver rich, tactile interactions that maintain absolute control over the visual identity of the brand. Stress Release proves that with the right balance of mathematical rigor and artistic intent, the web can be just as satisfying as a physical toy.