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
Top comments (0)