This is a submission for Weekend Challenge: Passion Edition
What I Built
Hearth is a campfire for the things you care about.
Every passion you're tending (the gym, a book, a side project, a skill you keep meaning to learn) is a literal fire on screen. Spend time on it and log the minutes ("add a spark"), and the flame grows. Ignore it and it slowly sinks down to embers. It never fully dies though, which felt important. Real passions don't either. One spark and it's back.
The idea came from the Olympic flame. They light the cauldron at the opening ceremony and it burns for the whole games, and every win along the way feels like it's feeding that one fire. I wanted that for ordinary life: my gym sessions and reading nights as small victories thrown into a flame that's mine. Every habit tracker I've tried does the opposite. It guilt-trips me with grey squares and broken streaks. So instead of a grid, you get a night scene with your fires burning along the ground, and a big central flame (labelled "You") that every one of them feeds, like a personal cauldron.
A few things it does:
Warmth decays on a half-life, in real time. A daily habit cools in about 3.5 days, but a monthly one (like "learn a new skill") stays warm for weeks, because punishing a monthly goal on a daily clock is just mean.
Streaks understand cadence too. Gym counts consecutive days, "build a product" counts consecutive weeks, so a weekly flame doesn't show a permanent streak of zero.
Optional fire crackle sound, and the volume actually follows how warm your hearth is. A dying hearth gets quiet.
Respects prefers-reduced-motion with a calm, still render instead of the particle animation.
Everything lives in localStorage. No accounts, no server, nobody's dashboard.
Demo
https://hardboyyy.github.io/hearth-fire/
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.
Top comments (0)