Project Overview Debtox required a dynamic, lightweight, and interactive character animation to engage users within their platform. Using Rive, I designed and animated a custom Highland cow character capable of reacting in real-time to user data and application states, providing a highly engaging visual experience.

The Challenge The core objective was to create an interactive visual representation of user data—specifically balancing debt and savings. The animation needed to be fully responsive, performance-friendly, and capable of seamless transitions between different states based on live input, rather than relying on static, pre-rendered video files.

The Solution & Approach I utilized Rive to build a highly interactive asset driven by a complex State Machine. By rigging the Highland cow character and integrating it with specific application logic, the character dynamically interacts with objects (such as the geometric block) to visually represent the user's current status and actions.

Technical Implementation (Rive State Machine) To ensure fluid interactivity and developer handoff, I configured the Rive State Machine with custom inputs to drive the animation logic directly from the app's code:

Numerical Inputs (saverLevel, debtLevel): These variables dictate the character's posture, effort, and animation state, dynamically adjusting the visual feedback based on the user's current metrics.

State Triggers & Booleans (setStone, side): These toggles control specific interactions, such as the character engaging with or pushing the weighted block, allowing for immediate visual feedback when the user takes action.

Seamless Transitions: I mapped out precise blend states between resting, pushing, and reacting timelines so the character moves naturally without animation stutters, regardless of how quickly the data inputs change.

The Outcome The final deliverable is a highly optimized, interactive .riv file ready for seamless implementation into the Debtox application. The interactive character elevates the user interface, providing an intuitive and gamified way for users to visualize their metrics.