The problem with habit trackers is that they panic for you.

Streak counters treat your wellbeing like a glass chain: miss one day and 47 days of effort shatter to zero at midnight. That's a design choice — and we think it's the wrong one. Guilt is not a growth strategy.

Bloom replaces the streak with something that behaves like real growth: a garden.

What it does

Plant a seed for each habit — 7 hand-drawn species (sunflower, fern, tulip, lavender, cactus, bonsai maple, chrysanthemum), each with its own temperament
Water with one tap on the days you show up, and watch your plant grow through five stages: seed → sprout → sapling → bud → bloom
Forgiveness, built in: miss a few days and your plant only wilts. One tap revives it, and every stage of growth it earned stays earned — forever. Plants don't punish you for a rainy week.
Focus Mode: settle into a 15/25/45-minute session and watch a flower unfurl in real time as the timer runs — a living progress bar. Every 25 minutes of deep focus waters your garden as rain.
Insights as a weather report, not a scoreboard: garden health, a 14-day watering calendar, and gentle totals

How we built it

Next.js 16 + TypeScript + Tailwind CSS 4 + Zustand, zero backend — all state lives in the browser (localStorage), so Bloom is instant, offline-friendly, and private by default
Generative SVG plants: every habit's ID deterministically seeds its height, lean, leaf angles and petal rotation — the same habit always regrows the same individual plant, and no two gardens look alike
Web Audio API synthesizes the optional watering chime — no audio assets
Day/night theming follows your system; October ambience (drifting pollen, falling leaves) rendered in pure CSS/SVG

Accessibility is a first-class garden bed, not a hedge

Bloom ships a live in-app accessibility panel (the circle-person button, top right) with six persisted settings: text size, high contrast (beyond WCAG AAA), reduced motion, dyslexia-friendly typeface, relaxed line spacing, and large touch targets — applied instantly, on this very page. Under the hood:

Full keyboard support: skip link, 3px visible focus rings, focus moves to each view's heading on navigation, Escape closes every overlay
Screen-reader care: landmarks, aria-live toasts with real Undo, labeled progress bars, and described plants (species, stage, health)
State is never color-alone — wilting always pairs icons and text
prefers-reduced-motion honored by default; every ambient animation has a still-life path

The Greenhouse — a design system you can audit

Every judge can inspect Bloom's design decisions in-app: the full token palette (warm ivory soil, leaf greens, terracotta clay, harvest gold), the Fraunces/Inter type pairing (with a one-tap Lexend swap), all 7 species × 5 growth stages, and component states with honest hover/focus/disabled treatment.

Challenges we ran into

Making "forgiving" feel intentional rather than unfinished — the wilt/revive mechanics went through several tunings (7-day wilt threshold, zero progress loss) until kindness read as clearly as pressure does in other apps
Keeping 7 species × 5 stages legible as silhouettes while staying generative and deterministic
Balancing delight against respect: motion that charms at full speed and disappears entirely when reduced motion is requested

What we learned

Kindness is a design constraint. Removing streaks forced us to replace manufactured urgency with intrinsic motivation — growth you can see. Once the plant was the progress bar, every design decision got easier and more honest.

Try the live demo at hyperbloom.pages.dev — plant a seed, water it, wilt it, revive it, and grow a flower through one focus session. The garden remembers you when you come back. Full source code: github.com/43aquarius/bloom-habit-garden.