Interactive Rive Character Animation: AI Agent Avatars by Aavirash MitraInteractive Rive Character Animation: AI Agent Avatars by Aavirash Mitra

Interactive Rive Character Animation: AI Agent Avatars

Aavirash Mitra

Aavirash Mitra

Giving AI Agents a Face

A fully interactive AI agent avatar creator and character selector, built entirely in Rive. Five characters with distinct personalities, each with hover and entry animations, a working skin tone selector, a model selector, and a complete agent chat UI. Everything responds on click. Nothing is a mockup.
The Character Selector in Action - Triggered on Click

The Idea

Agents are everywhere. Almost none of them have a face. The whole category lives inside a text box — a blinking cursor and a wall of words. That felt like a missed opportunity.
An agent you can see, choose, and customize is an agent you connect with. I wanted to test what happens when you put a real character in front of the model: something with personality, movement, and presence. So I built it.

What I Built

1. Built for AI & Agentic products

 designed the full agent configuration interface: a left sidebar with the skin tone selector up top, a tools section for assigning tools to the agent, a role field, and an instructions input for defining how the agent behaves. On the right, a skills selector and a model selector. Every control is part of one cohesive agent-builder experience. Hit Launch Agent and it opens into a designed chat UI where the character carries through and greets you — the payoff, not the point.

2. Five characters

Each character has its own personality, entry, and animation loop. Designed, rigged, and animated in Rive so they behave like living UI, not static art.
Distinct look and motion per character.
Hover animations that make the picker feel alive.
Entry animations that play on selection.

3. Skin tone selector

Five skin tones per character, all live. Click a tone and the character updates instantly across every part of the UI — no reload, no swap-out. Same rig, real-time recolor.
Skin Tone Selector for All Characters

4. Model selector & AI Chat UI

A real model picker wired into the interface. The kind of control you'd expect in a shipping agent product, treated as a first-class part of the design. A realistic AI Agent Chat interface was also built to show how the characters would live in an actual real world app.
The model selector and the animated AI Chat Interface
The AI Chat Interface Design
The AI Chat Interface Design

How It Works

1. Built in Rive

Every character and interaction is a Rive state machine. Hover, click, entry, and recolor are all driven by inputs — not video, not sprite sheets. That's what keeps it lightweight and fully interactive.
State Machine Setup for Elliot's Skin Tone Selector
State Machine Setup for Elliot's Skin Tone Selector
Character rigging of Maya with Bones in Rive
Character rigging of Maya with Bones in Rive

2. One click, everything responds

Selecting a character or a skin tone updates the whole interface at once. The picker, the preview, and the chat character all stay in sync from a single interaction.

Why It Matters

1. Where agents are going

The next wave of agent products will compete on feel, not just capability. A face, a personality, and a bit of motion turn a tool into something people want to spend time with. This project is a working bet on that direction.
Like this project

Posted Jul 6, 2026

Interactive Rive character animations for AI agents. 5 animated avatars, skin tone + model selectors, and a full agent chat UI. All built in Rive.