You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Elijah Voigt cf5e7460c7 fix(bit-by-bit): make pixel reveal 1:1 with streak-weighted units
Drop the pixelsPerCheck calibration constant that scaled units to a
fixed "perfect month" pace regardless of image size. 1 unit now equals
1 pixel directly (Nth check of the day reveals N pixels, multiplied by
that day's streak length), so bigger images genuinely take longer and
the numbers in the UI match what's actually happening. Also removes
the now-obsolete "~N days to finish" upload estimate and corrects the
About copy, which previously implied the streak multiplier applied
directly to pixel counts.
6 days ago
..
docs fix(bit-by-bit): make pixel reveal 1:1 with streak-weighted units 6 days ago
CLAUDE.md feat(bit-by-bit): pixel-art habit tracker with live favicon [vibed-nz22] 1 week ago
README.md feat(bit-by-bit): streak-multiplier rewards, Data tab with wipe, footer, onboarding upload [vibed-nf6g] 1 week ago
index.html fix(bit-by-bit): make pixel reveal 1:1 with streak-weighted units 6 days ago

README.md

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 from file:// 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 + FisherYates) 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 1648 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).