--- title: Building Tactile UX: Honoring Intentional Design With... description: A team at Isadora Agency built a tactile, gamified stress-relief web experience called Stress Release without physics engines or WebGL, relying entirely on... canonical: https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building Tactile UX: Honoring Intentional Design With Lottie — Smashing Magazine | daily.dev og:description: A team at Isadora Agency built a tactile, gamified stress-relief web experience called Stress Release without physics engines or WebGL, relying entirely on... og:url: https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps og:image: https://api.daily.dev/og/posts/YvOKqRlPs.png og:image:alt: Building Tactile UX: Honoring Intentional Design With Lottie — Smashing Magazine 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. # Building Tactile UX: Honoring Intentional Design With Lottie — Smashing Magazine **[Smashing Magazine](https://daily.dev/sources/smashing)** · 9 min read · 24 upvotes · 3 comments ## Summary A team at Isadora Agency built a tactile, gamified stress-relief web experience called Stress Release without physics engines or WebGL, relying entirely on Lottie's programmatic API, DOM events, and distance-based math. The article explains the architectural rationale: animators produced intentional, frame-precise motion that physics engines would have overridden with algorithmic approximations. Key techniques include radial input mapping using the Pythagorean theorem to create concentric scoring zones, frame-range segment control via Lottie's playSegments() API, CSS custom properties for responsive scaling, and mobile optimizations such as sequential asset loading, on-demand memory destruction of explosion animations, and dynamic quality reduction (lottie.setQuality(0.5) for 21 simultaneous shelf characters vs. full quality for the single play character). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you calculate hit distance and score zones for a click on an animated character using Lottie? Convert the click's page coordinates into the character's local coordinate space by subtracting the character's offset, then compute the vector from center to click point and take its magnitude with Math.hypot(a, b). That distance value is then mapped to concentric scoring zones (e.g., under 10px scores 100 points, over 145px is a miss), creating a dartboard-style hit detection system independent of the animation's visual complexity. _Developers building interactive click-based animations can find similar architecture breakdowns curated on daily.dev._ ### How do you control Lottie animation playback to jump between specific frame segments on user interaction? Define frame ranges for each animation state (like idle, squeeze1, squeeze2, squeeze3) in a sections object, then call playSegments() with the target frame range and a force flag to jump immediately. Stopping the current segment, disabling looping, and locking further input until onComplete fires ensures each click triggers exactly one deterministic animation sequence rather than an emergent physics response. _Anyone tuning Lottie-driven interactions can track techniques like this through daily.dev._ ### How can you reduce Lottie file size and rendering cost for mobile performance when loading many character animations? Load animations sequentially in pairs using await rather than all at once, monitor load time with performance.now() to detect slow connections past a 5-second threshold, destroy and recreate heavy explosion animations instead of keeping them in memory, and apply setQuality(0.5) with reduced playback speed for background shelf animations while reserving full quality for the single focused character in play. _Developers optimizing heavy animation assets for mobile can follow performance techniques like these via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@sabined** · 0 upvotes > Really interesting to read about all the development decisions that went into creating this. **@brennangoewert** · 0 upvotes > Great article. Did not know what Lottie was at first but I am pleasantly surprised and will def be trying it out. **@agustinbarrientos** · 0 upvotes > Does it stay smooth when someone taps it as fast as they can? ## Similar posts on daily.dev - [The Physics of Great UX: Making Digital Interfaces Feel Real](https://daily.dev/posts/the-physics-of-great-ux-making-digital-interfaces-feel-real-rm2szuz8n) · UX Planet · 0 upvotes · 0 comments - [Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage](https://daily.dev/posts/inside-haoqi-design-letting-dom-and-webgl-share-a-retro-futurist-stage-onvg2vzkk) · Codrops · 1 upvotes · 0 comments - [Creating Memorable Web Experiences: A Modern CSS Toolkit](https://daily.dev/posts/creating-memorable-web-experiences-a-modern-css-toolkit-d0c4mc6kb) · CSS-Tricks · 11 upvotes · 1 comments - [Designing Stable Interfaces For Streaming Content — Smashing Magazine](https://daily.dev/posts/designing-stable-interfaces-for-streaming-content-smashing-magazine-urvigomyr) · Smashing Magazine · 1 upvotes · 0 comments - [Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI](https://daily.dev/posts/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai-we76kcyl9) · Codrops · 33 upvotes · 2 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#ux](https://daily.dev/tags/ux), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps) ```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":"Building Tactile UX: Honoring Intentional Design With Lottie — Smashing Magazine","url":"https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps"},"datePublished":"2026-08-11T13:05:13.811Z","dateModified":"2026-09-14T06:54:57.999Z","description":"A team at Isadora Agency built a tactile, gamified stress-relief web experience called Stress Release without physics engines or WebGL, relying entirely on...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/888f5f462a77f11d966b4121d37ce5c0?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/888f5f462a77f11d966b4121d37ce5c0?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Smashing Magazine","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":"Smashing Magazine","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/smashing","url":"https://daily.dev/sources/smashing"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":24},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,javascript,ux,web-animation","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Smashing Magazine","item":"https://daily.dev/sources/smashing"},{"@type":"ListItem","position":3,"name":"Building Tactile UX: Honoring Intentional Design With Lottie — Smashing Magazine"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps","comment":[{"@type":"Comment","text":"Really interesting to read about all the development decisions that went into creating this.","datePublished":"2026-08-12T15:21:34.112Z","url":"https://daily.dev/posts/YvOKqRlPs#c-NixAqPM7c","author":{"@type":"Person","name":"Sabine Deviche","url":"https://daily.dev/sabined","image":"https://media.daily.dev/image/upload/s--ZY_0KAdO--/f_auto/v1786979385/avatars/avatar_FAnj2xLBagDTNant0UOQL?_a=BAMAMicg0"}},{"@type":"Comment","text":"Great article. Did not know what Lottie was at first but I am pleasantly surprised and will def be trying it out.","datePublished":"2026-08-12T13:14:36.604Z","url":"https://daily.dev/posts/YvOKqRlPs#c-cUntOOKY5","author":{"@type":"Person","name":"Brennan Goewert","url":"https://daily.dev/brennangoewert","image":"https://avatars.githubusercontent.com/u/15313658?v=4"}},{"@type":"Comment","text":"Does it stay smooth when someone taps it as fast as they can?","datePublished":"2026-08-16T03:35:54.424Z","url":"https://daily.dev/posts/YvOKqRlPs#c-h9qJ7UGmf","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-tactile-ux-honoring-intentional-design-with-lottie-smashing-magazine-yvokqrlps#faq","mainEntity":[{"@type":"Question","name":"How do you calculate hit distance and score zones for a click on an animated character using Lottie?","acceptedAnswer":{"@type":"Answer","text":"Convert the click's page coordinates into the character's local coordinate space by subtracting the character's offset, then compute the vector from center to click point and take its magnitude with Math.hypot(a, b). That distance value is then mapped to concentric scoring zones (e.g., under 10px scores 100 points, over 145px is a miss), creating a dartboard-style hit detection system independent of the animation's visual complexity. Developers building interactive click-based animations can find similar architecture breakdowns curated on daily.dev."}},{"@type":"Question","name":"How do you control Lottie animation playback to jump between specific frame segments on user interaction?","acceptedAnswer":{"@type":"Answer","text":"Define frame ranges for each animation state (like idle, squeeze1, squeeze2, squeeze3) in a sections object, then call playSegments() with the target frame range and a force flag to jump immediately. Stopping the current segment, disabling looping, and locking further input until onComplete fires ensures each click triggers exactly one deterministic animation sequence rather than an emergent physics response. Anyone tuning Lottie-driven interactions can track techniques like this through daily.dev."}},{"@type":"Question","name":"How can you reduce Lottie file size and rendering cost for mobile performance when loading many character animations?","acceptedAnswer":{"@type":"Answer","text":"Load animations sequentially in pairs using await rather than all at once, monitor load time with performance.now() to detect slow connections past a 5-second threshold, destroy and recreate heavy explosion animations instead of keeping them in memory, and apply setQuality(0.5) with reduced playback speed for background shelf animations while reserving full quality for the single focused character in play. Developers optimizing heavy animation assets for mobile can follow performance techniques like these via daily.dev."}}]} ```