AI Assistant Character Animation — Rive & State Machine

👇 Click the emotions and watch the mascot react in real time

rivefaceanimation.vercel.app

This is an interactive AI assistant character built entirely in Rive for Qubic — a Nigerian infrastructure platform at qubic.com.ng. The brief was clear: give users a reason to ask for help instead of leaving the page.

The character sits at the bottom-right corner of the landing page, automatically cycling through emotional states — idle, confused, thinking, sad, agreeable, listening — to signal that an intelligent assistant is ready to respond. The result is a state-machine-driven mascot that uses interactive character animation to reduce drop-off at exactly the moment a user might otherwise leave.

The client needed a persistent Rive animation widget that would live on their landing page and draw users toward making enquiries with the AI. Rather than a static icon or looping GIF, they wanted something with personality — a face that felt alive and responsive.

Initial direction called for individual user-triggered states, with each emotion firing on demand. After reviewing the first build, the client pivoted — all emotion states should run as a single continuous, automatic flow with no manual triggers required. That meant rethinking the state machine architecture entirely

The first version was built with trigger inputs — each emotion fired manually. Clean in theory, but not what the product needed. The client wanted the character to feel ambient and self-directed, not reactive to clicks. I rebuilt the state machine as a single looping flow.

The key technical decision was creating separate loop and exit animation variants for each emotion — something omitted in the first pass. Without exit animations, transitions between states were abrupt and broke the illusion of a living character. With them, each state completes its expression naturally before flowing into the next.

During the build I also proposed a redesign of the default and sad face expressions, which the client approved. The revised faces read more clearly at small sizes — critical for a bottom-corner widget rendering at roughly 80–100px on a live page.

If you're building a product that needs personality — a mascot, an assistant widget, or any interactive character — I design and animate Rive state machines ready to drop into any web stack. Get in touch.