Heatmaps, Streaks, and Red Blinks
May 25, 2026 · blog
The whole point of a shared challenge is seeing each other's progress. I needed a visualization that communicates "how consistent is this person" at a glance. No numbers, no stats — just a visual pattern.
GitHub Contribution Graph Energy
GitHub's contribution heatmap is the perfect reference. Dense green = active. Gaps = inactive. You read it in a second without thinking. I wanted exactly that for daily habit tracking.
My implementation: 5 months visible (current + 4 prior). Each month rendered as a block with a day-of-week grid. Color intensity based on daily completion percentage:
- 0% complete: muted gray
- Under 34%: light green
- 34–67%: medium green
- 67–100%: dark green
Multiple tasks on the same day accumulate. If there are 3 tasks and you did 2, that's 67% — medium green. All 3 is dark green. Zero is gray.
Streak Calculation
Walk backward from today. For each day, check: was it an "applicable" day for this task? (Daily tasks apply every day. Weekday tasks skip weekends. Custom recurrence checks against the day array.)
If applicable and completed → streak continues. If applicable and not completed → streak breaks. Skip non-applicable days.
One important choice: today's missing task doesn't break your streak. You might just haven't gotten to it yet. The streak only breaks on a past day with a gap. This avoids the morning anxiety of "my streak is at 0 because I haven't done today's task yet."
The Red Blink
This was an experiment that stuck. Empty cells (missed days) randomly flash red — a brief 400ms blink every 2 seconds on a random empty cell.
It's subtle. You don't notice it unless you're looking at your heatmap. But when you see a red flash on a missed day, it's a tiny visceral reminder: "you skipped that one."
Not punitive — there's no notification, no shame message. Just a quiet visual pulse. My friends said it motivated them more than any streak counter.
Green Sparkles
The flip side: completed cells randomly sparkle green. A 600ms glow every 1.5 seconds on a random filled cell. Positive reinforcement for past work.
Combined effect: your heatmap feels alive. Greens glow, gaps pulse red, and the overall pattern tells you immediately whether you're keeping up or falling behind.
The Streak Badge
Each task row shows a flame icon with "Xd streak" in green text. Simple: how many consecutive applicable days have you completed this task?
The badge updates instantly when you check off today's task. Going from "4d streak" to "5d streak" is surprisingly satisfying. Small numbers psychology.
Consistency Percentage
Beyond streaks (which only count from today backward), I calculate overall consistency: days completed ÷ total applicable days within the challenge period. Stops counting at today (doesn't penalize ongoing challenges for future dates).
This gives you a longer-term view. Your streak might be 3 days (you missed one last week), but your consistency might be 85% (you've been solid overall). Both numbers are useful, they just answer different questions.