HydroBloom

Inspiration

I've always found it oddly hard to drink enough water — not because I don't know I should, but because there's nothing satisfying about it. You drink a glass, nothing happens, you forget, hours pass. Fitness apps gamify steps and workouts beautifully, but hydration is treated as an afterthought: a bland counter buried in a health dashboard nobody opens. I wanted to change that emotional equation. The idea came from watching a neglected desk plant slowly perk back up after watering — that visible, almost grateful transformation felt like exactly the kind of feedback loop humans respond to. If your hydration progress had a face, would you ignore it? HydroBloom is my answer to that question.

What it does

HydroBloom is a single-page hydration tracker that ties your daily water intake to the life of a virtual plant companion. Every glass you log nudges your plant from a drooping, bone-dry twig toward a flourishing, flower-crowned beauty. A human body silhouette fills with animated blue water in parallel, grounding the whimsy in something visceral and biological. The app tracks streaks, awards achievement badges, surfaces smart pattern-based insights (things like "you drink well in the mornings but tail off after 2pm"), and maintains a week-at-a-glance history chart. Everything lives in the browser via localStorage — no accounts, no servers, no friction.

How I built it

HydroBloom is a pure HTML/CSS/JavaScript single-page application with zero external dependencies. The plant and human body are built entirely in SVG — no image files, no icon libraries. I architected the state around a central data store persisted to localStorage, with a reactive render pipeline that recalculates everything (plant state, body fill level, all seven statistics panels, smart tip logic, achievement progress) whenever an entry is added. The water fill on the body silhouette uses a CSS clip-path driven by a calculated percentage, with a subtle sine-wave SVG path animating at the fill surface to simulate water movement. Plant state transitions run on CSS keyframe animations triggered by class swaps. The smart insight engine compares today's entry timestamps against the prior 7 days of stored history to detect morning/afternoon distribution shifts, frequency changes, and proximity to streak milestones, then selects the highest-priority message to surface.

Challenges I ran into

The hardest single problem was the human body water fill animation. A simple height percentage on a div looks mechanical and lifeless; making water look like water required layering an SVG wave path over a clipped fill region and synchronizing two offset animations so the crest never feels looped. Getting the clip boundary to respect the body silhouette's irregular contours — shoulders, neck, hips — while still animating smoothly across five discrete hydration thresholds took considerable iteration. The second major challenge was the smart insight system: writing logic that feels genuinely observant rather than templated required careful priority ordering so users don't always see the same category of message, and handling gracefully the many edge cases where data is sparse (first day, only one entry, streak just broken, etc.).

Accomplishments that I'm proud of

I'm most proud of the plant — it genuinely has personality across its six states. The bone-dry twig at 0% has cracked soil and a genuinely sad expression; the fully bloomed version at 100%+ sways gently and emits sparkle particles. The transitions between states feel earned rather than arbitrary. I'm also proud of how cohesive the full dashboard feels despite its density: seven distinct data panels, two animated visualizations, a chart, and a log form all coexist without feeling cluttered. The achievement system with its twelve badges and real progress tracking adds surprising depth for something that required no backend whatsoever.

What I learned

I came away with a much deeper appreciation for the gap between data and motivation. Showing someone "1200 / 2000 ml" is information; showing them a wilted plant looking up at them with a worried face is an emotional experience. The same data, radically different behavioral pull. On the technical side, I learned that SVG animation and CSS clip-path are far more capable than I'd assumed for organic, fluid-feeling effects — and that localStorage, structured thoughtfully with date-keyed history arrays, can serve as a surprisingly robust lightweight persistence layer for personal-use apps with 30-day rolling windows.

What's next for HydroBloom

The most requested stretch feature I designed for but left out is reminder logic — a worried plant expression and subtle pulse animation after two or more hours of inactivity, purely CSS-driven without browser notifications. Beyond that, I'd love to add customizable plant species (a cactus variant for users with lower goals, a tropical monstera for ambitious ones), a shareable summary card that generates a real image rather than just text, and a monthly trends view so users can spot seasonal patterns in their hydration habits. Longer term, an optional lightweight sync layer using a simple passphrase-protected cloud key would let people carry their streak across devices without full authentication overhead.

Built With

• css3
• html5
• javascript
• localstorage
• supabase
• svg