Building Tactile UX: Honoring Intentional Design With Lottie
Alexey Kopytin and his team at Isadora Agency set out to create “Stress Release,” an interactive page where users can click or tap animated characters that react with a squishy, explosive feel. Rather than employing Matter.js, Cannon.js, or any WebGL physics, they drove the experience entirely with Lottie JSON files, DOM event listeners, and a radial distance calculation. Each click is transformed into a vector from the character’s centre, producing a score based on concentric rings and repositioning a separate explosion Lottie animation at the exact hit point. The animation sequences themselves are stored as precise frame ranges—e.g., a “mega squeeze” that spans 181 frames—so the code can jump to the appropriate segment without any interpolation, preserving the designers’ meticulously crafted motion.
This approach runs counter to the prevailing pattern in interactive front‑end work, where developers reach for physics libraries to simulate realism. By opting for deterministic frame control, Isadora demonstrates that high‑fidelity tactile feedback can be achieved with lightweight vector animation tools, especially when the visual language is pre‑designed rather than emergent. The method also sidesteps the performance overhead of WebGL and the complexity of synchronising physics with vector assets, making it attractive for marketing sites or micro‑games that need fast load times and precise brand‑guided motion.
Looking ahead, the technique raises questions about scalability and maintainability. While the distance‑based hit detection works well for simple circular characters, more intricate shapes would demand custom hitboxes or polygonal math, potentially re‑introducing complexity. Additionally, reliance on Lottie’s frame‑by‑frame fidelity ties the experience to the animation pipeline; any change in the JSON structure could break the segment mapping. Developers should monitor Lottie’s evolving API for features like dynamic masking or built‑in interaction hooks that could streamline such implementations, and watch for emerging tools that blend deterministic animation control with richer physics without sacrificing performance.
Key Takeaways
Isadora Agency proved that a pure Lottie‑driven workflow can deliver tactile UI experiences without physics engines.
Precise frame‑range control ensures animators’ intent is preserved, avoiding the approximations typical of physics simulations.
The radial distance algorithm provides a simple, performant hit‑detection system that doubles as a scoring mechanic.
Future extensions will need more sophisticated hitboxes or API enhancements to handle complex shapes and larger animation libraries.
About the Source
This analysis is based on reporting by Smashing Magazine. Here is a short excerpt for context:
When tasked with building a highly interactive, tactile web experience, the architecture must serve the art direction. In this article, Alexey Kopytin explains their architectural rationale for building a digital stress-relief squeeze toy game using Lottie animations, DOM events, and distance-based math to maintain absolute control over their designers’ intentional motion.Read the original at Smashing Magazine
