How I built a PWA habit tracker with dynamic SVG flame physics (and why shattering failure states ruin UX)

Trx-Code-X — Tue, 15 Sep 2026 19:02:43 +0000

When building my side project Nexora, I wanted to tackle a huge psychological issue found in most productivity tools: streak fatigue.

Most habit trackers use rigid numerical counters or loud "shattering" animations the moment you miss a day.

From a UX standpoint, punishing failure triggers immediate guilt, which makes people abandon the app entirely instead of getting back on track.

I took a different approach using custom CSS and dynamic SVG animations to create a softer, non-punishing feedback loop.

The Solution: Dynamic Flame States Instead of static text, Nexora uses an animated SVG flame that dynamically shifts based on consistency:
~ Active Streak: The flame animates smoothly with warm CSS gradients and scale transforms.

~ Missed Day (Recovery State): Instead of shattering or resetting to zero, the flame simply "dims" and flickers softly. It signals a missed day without making you feel like you ruined all your hard work.

Why a PWA over a Native App?
~ Instant Loading: Zero overhead, no heavy App Store download required.

~ Offline-First: Uses local persistence so habits log instantly anywhere.

~ Cross-Platform: Runs identically across mobile browsers and desktop.

Tech Stack: Plain HTML/CSS, SVG manipulation, vanilla JavaScript, deployed on Vercel.

I'd love to get feedback from other builders: How do you balance gamification and failure states in your own apps without burning users out?
Live demo if you want to test the flame UI: https://nexora-daily.vercel.app

DEV Community: Trx-Code-X

How I built a PWA habit tracker with dynamic SVG flame physics (and why shattering failure states ruin UX)