2.6 KiB
Paint by Habits 🎨
A whimsical habit tracker where consistency paints a picture. You define your daily habits and pick a pixel-art image; every habit you check off reveals a few pixels. Over days and weeks the artwork emerges — finish it, celebrate, pick the next one.
What it is
- One self-contained file:
index.html. Vanilla JS + CSS, no build step, no frameworks, zero network requests. Works fromfile://or any static host. - Local-only: all data lives in your browser's
localStorage. No server, no accounts, no tracking. - Portable: export your full state as a JSON backup and import it on another device.
How it works
Each artwork is a pixel grid. On start, a seeded PRNG (mulberry32 + Fisher–Yates) fixes a random reveal order that stays stable across sessions. Checking off habits reveals pixels, and the more you do in a single day, the bigger the reward — the first habit each day is worth 1 unit, the second 2, the third 3, and so on (so a 4-habit day earns 1 + 2 + 3 + 4 = 10 units). Streaks multiply everything: each day's units are scaled by the length of your active streak, so on a 3-day streak the first check is worth 3 units and the second 6, and on a 5-day streak they're worth 5 and 10. The per-image reveal rate is sized so a "perfect month" of doing everything daily just fills the picture. Pixels never un-reveal across days; missing a day just pauses progress. Includes 8 built-in pixel artworks, or upload any image to pixelate it into a 16–48 cell grid.
Dark/light theme follows your OS by default, with a manual override. Streaks count any day you checked at least one habit; days where you did everything get a ✨ perfect-day sparkle.
Run it
Open index.html in a browser. That's it. To host it, copy the file to any
static host.
Test it
There is no test harness checked in (single-file app). Validation performed:
node --check on the extracted script, a grep proving zero external
references, and scripted jsdom flow tests covering onboarding, check/uncheck
persistence, day rollover, uncheck floor clamping, corrupt-state recovery,
storage-unavailable mode, import validation, and the completion/celebration
flow. See docs/DESIGN.md §9 for the edge-case checklist.
License
Dual-licensed under Apache-2.0 and MIT, following Rust ecosystem convention for this repository.
Disclaimer
This software was written with Claude Code. Design by Claude Fable 5
(claude-fable-5), implementation by Claude Sonnet 5 (claude-sonnet-5),
review and verification by Claude Opus 4.8 (claude-opus-4-8).