Interactive Breathing Animation System Built

Interactive Breathing Animation System Built in Rive I'd like to share a project I worked on a while ago.

The visuals are simple, but the most interesting part was building a flexible animation system in Rive. I set up logic, states, and interactions. This allows the animation to adapt to different use cases. And at the same time, it stays lightweight and easy to integrate. All parameters are controlled by developers: from timing to breathing method. This makes it easy to adapt to different types of exercises.

Key features: • Multi-language support • Breathing method selection (nose or mouth) • Adjustable timing for each phase (inhalation, holding, exhalation, resting) • One animation system for all exercise types (relaxation, focus, energy, etc.)

Built before data binding was introduced in Rive 😂

Try it out: https://rive.app/s/qSSq8Fnsz0GfXhHoslnoyw/embed 1. Select your language. 2. Adjust the timing and breathing method. 3. Start the session. 4. Press Finish to end the session after the current cycle. 5. Tap New Session to restart. All parameters can be updated in real time.