Agent Mascots

Procedural drawing with Canvas 2D. One API, multiple skins; every state is an animation defined in code. Preview in a real UI → · Compare all skins →

Skin (whole page): el.skin = '…'
Persistent state: el.state = '…'
One-shot: await el.play('success', 1500)
Color: color="#…"
Current state: idle

Wiring agent events to the mascot

Sizes: 32 px → 128 px

Crowd: one rAF loop, each one independent

Usage

<script src="mascot.js"></script>
<script src="styles/blob.js"></script>   <!-- the skin(s) you use -->
<agent-mascot skin="blob" state="idle" color="#7c5cff" scale="4"></agent-mascot>

const EVENT_TO_STATE = {
  thinking: 'thinking',   tool_use: 'working',   tool_error: 'error',
  ask_user: 'asking',     text: 'talking',       done: 'success',
  user_message: 'idle',
};
agent.on('event', (ev) => { mascot.state = EVENT_TO_STATE[ev.type] ?? 'idle'; });