The kiln heatmap & the ignite interaction

Ember's look is a warm kiln, deliberately unlike every other site on the box (no dusk gradient, no candy, no cool graph-paper). Two signature moves carry it.

The kiln heatmap

A GitHub-style year grid — but instead of green, tiles warm through a kiln ramp: ash → straw → amber → ember → deep-ember. Each day's level is the fraction of that day's scheduled items you completed, bucketed 0–4. Rendered as a CSS grid with grid-auto-flow: column and 7 rows; the first column is offset by the start weekday. A day with nothing scheduled is a faint outline, not a cold cell.

"Ignite" — the completion micro-interaction

Tapping a habit's check button:

1. scale(0.96) press (the tactile cue borrowed from Starbucks' design language),
2. the chip's fill warms to ember,
3. a short amber glow + a few spark dots fan out,
4. the streak flame rolls up by one (tabular figures, so digits don't jitter).

It's all transform/opacity (cheap, 60fps) and entirely gated behind prefers-reduced-motion — with reduced motion the colour still changes but no sparks or scale fire. The server returns the authoritative new status from /api/checkin; the client just animates to match, so the UI can never drift from the ledger.

Running a ritual

A ritual opens a focused stepper: a progress arc, one row per step, optional per-step timers ("Stretch | 5m" → a 5-minute countdown that auto-checks the step at zero). Completing all steps fully "fires" the ritual tile — the day's ceremony.