State-driven animated avatars: a better waiting experience for AI chatbots
TL;DR
Tying an avatar’s state to the lifecycle of an AI call (waiting → processing → resting) helps users understand what the agent is doing and makes waits feel shorter. The video showcases a character library that ships with these states.
The core idea
| State | When | What the avatar shows |
|---|---|---|
| Idle | Waiting for user input | Subtle, ready motion |
| Working | Prompt received, calling the API/processing | A “busy working” animation |
| Sleeping | Inactive for a while | A resting state that saves resources |
According to the video, the library offers around 18 characters with these states to match your design system.
How to put it to work
- Map states in code: request sent → Working; stream finished or errored → Idle; N minutes without interaction → Sleeping.
- Don’t just decorate: pair the avatar with real progress info (searching, reading files…) so users know what the agent is doing.
- Accessibility: respect
prefers-reduced-motionand expose a text status to screen readers (aria-live).