Agent Mascots

Animated mascots that show when your AI agent is thinking, working, asking a question or hitting an error. characters, any color: skin picks the character, color paints it in your brand color. One web component, zero dependencies. Rows are characters, columns are states.

See it in a real app

Pricing

One-time payment, no subscription. Checkout and downloads through Gumroad; updates are free.

License

Standard license (single character, bundle, company): unlimited use in your own products and sites, including commercial ones; change the colors and size as you like. You may not resell the skin file on its own or publish it as open source, and you may not use it as a logo or registered trademark. Other people can buy the same character.

Exclusive license: the character is taken off sale for good, the copyright is transferred to you by contract, and you can use it as a logo or brand mark. Anyone who bought it earlier under the standard license keeps their rights; the quote tells you how many times it has sold.

Companies with more than $1M in annual revenue, or that have raised funding, use the company license. This is a summary; the binding terms are in the LICENSE file included in the download.

Setup

<script src="mascot.js"></script>
<script src="styles/blob.js"></script>
<agent-mascot skin="blob" color="#7c5cff" state="idle" scale="2"></agent-mascot>
<!-- skin = which character, color = its body color (any hex) -->

mascot.state = 'thinking';          // persistent state
await mascot.play('success', 1500); // one-shot, then returns to the persistent state

It's a standard web component, so it also works in React, Vue and Svelte. Every mascot on a page shares a single animation loop, and off-screen mascots aren't drawn.