Melo Cares
Interactive Rive animations for Melo Cares: Wellness Garden, an app where healthy habits grow a garden: plants and trees in four stages of growth, Melo the cloud mascot and the small moments in between.
At a glance
- Client
- Melo Cares
- Industry
- Wellness app
- What we made
- Plants and trees in four growth stages, the Melo mascot and UI elements, built in Rive
- Tools
- Rive, Figma
Case study
The brief
Melo Cares: Wellness Garden turns self-care into something you can watch grow. Every healthy habit a user completes helps their garden flourish, so the plants had to feel alive and rewarding at every step, and the app needed a friendly character to guide people along the way.
The approach
We designed a collection of plants and trees, each drawn in four stages of growth, from a seed in the soil to a full bloom or a grown tree. Alongside them came Melo, the app’s cloud mascot, and the small elements that make the garden feel cared for, like the watering can.
Everything was built in Rive. Each plant is a single component driven by a data-bound view model: the app simply sets the plant’s growth stage, and the state machine takes care of the rest, from a gentle idle sway to the growth transitions and the sparkle that celebrates each new stage. Melo has its own set of moods and reactions.
Because the animations run in real time rather than as video, they react to what the user does, stay crisp on every screen and keep the app light.
The outcome
A living garden that rewards every small step, and a mascot that gives the app its personality. The developers drive every animation with a few simple values, so new plants and states slot in without new animation work.
In Rive
