Bot avatars

Animated avatars for your AI agents. Eighteen plush 3D shapes with living faces that look around, hop while they work and doze off between tasks. Drawn on a plain 2D canvas: no WebGL, no dependencies.

Make your own bot → Get started

Get started

One ES module. Drop the custom element into any page, drive it from plain JavaScript, or use the React wrapper.

<script type="module" src="https://cdn.jsdelivr.net/gh/hackdonalds/bots@main/src/index.js"></script>

<bot-avatar type="clover" state="working" size="96"></bot-avatar>
<bot-avatar type="cat" face="mouth" hat="party" bow-tie></bot-avatar>

import { createBot } from 'https://cdn.jsdelivr.net/gh/hackdonalds/bots@main/src/index.js';

const bot = createBot('#agent', { type: 'droid', size: 96, glasses: 'round' });

// later, when your agent starts and finishes a task
bot.setState('working');
bot.setState('sleeping');
bot.poke(); // hop and turn round

import { BotAvatar } from '@hackdonalds/bots/react';

function Agent({ busy }) {
  return <BotAvatar type="clover" state={busy ? 'working' : 'default'} size={64} />;
}

Things to wear

Hats, glasses, headphones and a bow tie, placed on the body's own shape and turned with the head.

Your own shape

path takes SVG path data in a 100×100 box centred on (50, 50). It is inflated, lit and animated like any stock shape.

Heart

const heart = 'M50 88C50 88 12 64 12 38C12 24 23 14 35 14C42 14 47 18 50 23C53 18 58 14 65 14C77 14 88 24 88 38C88 64 50 88 50 88Z';

<bot-avatar type="circle" path="${heart}" color="#ff5c8a"></bot-avatar>

Options

Every option works as a JavaScript option (camelCase) or an attribute (kebab-case).

Option	Values	Default