This is a submission for
Quick tour: open it, and the left panel explains the metaphor. Five starter fires are already laid out (gym, reading, coding practice, building a product, learning a new skill). Click one, log 30 minutes, and watch it flare up.
Code
https://github.com/hardboyyy/hearth-fire
How I Built It
Three files: index.html, style.css, script.js. No framework, no build step, no dependencies. You open the HTML file and it runs.
The fire is a little particle system on a canvas. Each flame keeps spawning glowing dots that rise, drift in a fake wind, and fade out. The more you've tended a fire, the more and bigger the particles, so a healthy fire literally burns taller.
The math is one idea: every logged session is a spark worth its minutes, and that value halves on a schedule (every 3.5 days for daily habits, slower for weekly and monthly ones). Add up the sparks and you get the fire's warmth. Fires cool on their own, old effort never quite reaches zero, and a single fresh spark visibly revives a dying flame.
Streaks work by turning dates into simple numbers (day number, week number, month number) and checking they run consecutively. That's how one loop handles daily, weekly and monthly habits.
A few console.assert checks run on every page load to make sure the decay and streak math still behaves. Not a test suite, but it's caught me twice already.
With another weekend I'd add editing a fire's cadence and maybe a gentle "this fire is getting cold" nudge. But the whole point is that the app doesn't nag you. The fire just gets smaller, and somehow that's more motivating than any notification.
SOCIAL SHARE CARD GENERATOR