Rive Interactive Character System for Sabab App

For Sabab, I designed and built a modular interactive character system in Rive, transforming their existing character artwork into an animation system that could be controlled directly from their iOS app.

The goal was not only to animate the character, but to create a flexible structure that could support different states, colors, and accessories as the character experience continues to grow.

I created and refined a series of looping character animations, including three idle variations, listening, sleeping, and a one-shot reaction animation.

Each animation was designed to preserve the character’s personality while transitioning naturally between different app states.

The animations were connected through a Rive State Machine and exposed through the Main View Model, allowing the app to control the character at runtime.

Persistent states such as Idle 1, Idle 2, Idle 3, Listening, and Sleeping can be selected dynamically and continue looping until the app requests another state.

A separate trigger handles the Hope reaction, allowing it to play once and return naturally to the active character state.

I built the accessories as a modular system rather than baking them into individual animations.

Clothing, glasses, hats, and other character items can be enabled, combined, and switched independently while continuing to follow the same character rig and animations.

This keeps the system scalable as new accessories are added.

The character also supports multiple emotional color variations.

Instead of creating separate animation sets for every color, I built a reusable color system controlled through the View Model, allowing the app to switch the character palette while preserving the same rig, animations, and accessories.

Small details such as the blush also adapt to the selected body color to maintain visibility and consistency.

The final Rive structure was designed around runtime control, with animation states, character colors, accessory visibility, and accessory variants exposed through View Models and properties that could be controlled directly from the app.

The final deliverables included both the editable .rev source and production-ready .riv export for iOS integration.

Interactive file in Rive Market: