Hydration Ring
A ring that fills as you drink, and resets at midnight.
StarterWeb appProductivity3–7hAI-buildable 5/5no setupworth shipping
A small daily tracker with an animated SVG progress ring and one-tap logging of common amounts. Deliberately tiny scope — the craft is entirely in the animation feeling good and the daily reset being reliable.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- One-tap buttons log common drink sizes
- An SVG ring animates smoothly toward the daily goal
- The goal is configurable
- The log resets automatically at local midnight
- The last entry can be undone
- A weekly summary shows goal attainment
- State persists across reloads
The interesting part
- Ring animation using stroke-dasharray that stays smooth
- Detecting a day rollover while the tab is open
Once it works
- Add reminder notifications at intervals
- Add custom drink types with different volumes
- Add a goal that adjusts to activity
Suggested stack
reacttypescripttailwindframer-motionlocalstorage