Breathing Guide
A shape that expands and contracts, and you follow it.
StarterWeb appCreative3–8hAI-buildable 5/5no setup
A guided breathing exercise where an animated form paces inhale, hold and exhale. Almost no logic and entirely about execution: the animation has to be genuinely calming, precisely timed, and must respect reduced-motion without becoming useless.
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
- An animated form paces the breathing cycle
- Several patterns like box breathing and 4-7-8
- Phase labels appear in time with the animation
- Session length is selectable with a completion state
- Timing stays accurate over a long session
- Reduced motion is respected with a non-animated alternative
- Optional audio cues per phase
The interesting part
- Long animations drifting out of sync with real elapsed time
- Providing a reduced-motion alternative that still guides pacing
- Easing curves that actually feel like breathing
Once it works
- Add haptic feedback on supporting devices
- Add a custom pattern builder
- Add a session history
Suggested stack
reacttypescripttailwindframer-motion