Pip: Interactive Rive Character for Apps

Pip is a pet companion for an app: a small character that reacts to the person using it. Hover and he waves, click and he jumps, and the panel next to him dresses him up and changes his colour. Every control on screen is wired through one Rive view model, so a developer can drive the same file from code.

Most mascots in apps are a looping Lottie that ignores you. I wanted the opposite: a character that notices the pointer, answers every input within a fraction of a second, and that a product team can customise from data instead of asking for a new export each time.

Idle that feels alive: a 4 s seamless breathing loop, antenna sway with a lagging tip, and a blink layer that mixes single and double blinks.

Wave on hover, jump on click: the jump has anticipation squash, launch stretch, an airborne pose, landing squash and a springy settle, and the contact shadow shrinks and fades at the apex.

Eye tracking: the face shifts up to 12 px and the pupils up to 8 px toward the pointer, driven by a joystick, no script.

Wearables and colour from data: hat, scarf and glasses are booleans and the body colour is a colour property on the Pip view model. Each wearable pops in and out with its own timeline.

A real control panel: toggles, swatches and buttons built in Rive with hover states, so the file demos itself.

One state machine with 16 layers running at once: idle, blink, an actions layer (wave and jump, with the jump allowed to interrupt a wave), one layer per wearable, a swatch-selection layer and nine hover layers. The view model holds hat, scarf, glasses, bodyColor and the wave and jump triggers. The state machine also fires waved and jumped events back to the host app, so a product can play a sound or log the moment.

Every movement uses an eased curve, with overshoot on landings and pop-ins. Nothing moves linearly.

A single .riv that a developer can drop into a web, iOS or Android app and control with a few lines: set bodyColor to the user's theme, flip hat on for a winter campaign, fire jump when a task is done. The editable file lives in my Rive workspace and can be handed over as is.

Tools: Rive (state machine, view model data binding, joystick, listeners).