Interactive Rive mascot for weather products

Pip is an interactive weather mascot concept for products that need live forecast data to change an in-app character in real time. Instead of managing separate animations for sunny, rainy, snowy, stormy, and night conditions, a product team can connect weather values to one reusable Rive asset. Pip then updates its pose, expression, and accessories as the forecast changes.

Character animation and interaction design

Rive State Machine architecture

Enum-driven weather states

Reusable accessories and transitions

A lightweight .riv handoff designed for web or app implementation

Weather products often need the interface to reflect changing conditions without loading separate video files or swapping between disconnected animations. This approach keeps the experience expressive while giving a product team one reusable Rive asset that can respond to live forecast states.

The mascot is structured as a single lightweight .riv file with a State Machine, Enum input, and Data Binding setup. A developer can connect forecast conditions to the exposed weather states, allowing the same asset to react across a web or app experience.

Legs are IK-rigged with Target Groups, giving him grounded weight shifts when he braces against wind or stomps through snow. Accessories: umbrella, scarf, sunglasses, swap through Solos tied to the same enum, no duplicate artboards required.

Delivered as a single lightweight .riv, wired for Data Binding, so any frontend (React Native, Flutter, Expo, or web canvas) can feed in live weather data, and Pip reacts in real time.

Rive Animator

Interactive Designer

Motion Designer

Tools: Rive