Wobnimo

      

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/wobnimo.js"></script>

<wobnimo-mascot character="mochi" state="thinking"></wobnimo-mascot>

Drop those two lines anywhere and a living 3D mascot is on your page.

// npm i wobnimo
"use client";
import { Mascot } from 'wobnimo/react';

export function CopilotAvatar() {
  return <Mascot character="volt" state="thinking" style={{ width: 160, height: 160 }} />;
}

Import one character (wobnimo/characters/mochi, ~1.2 KB) or the full cast — you only ship what you use.

import { mount } from 'wobnimo';
import { mochi } from 'wobnimo/characters/mochi';

const mascot = mount(document.querySelector('#mascot'), mochi);
agent.on('status', (s) => mascot.setState(s));   // idle · thinking · speaking · celebrating…
mascot.setPalette({ jelly: '#ff5d8f' });          // recolour live, no rebuild

Or register <wobnimo-mascot> once via import "wobnimo/element" in Vue, Svelte, or plain JS.

import { Mascot } from 'wobnimo/react';

const { status } = useChat(); // Vercel AI SDK

<Mascot character="mochi" status={status} />

npx wobnimo skill                      # installs the skill for Claude Code, Codex, Cursor, OpenCode…
npx wobnimo check mascots/drift.ts     # measures real 3D geometry & reports exact coordinate fixes
npx wobnimo preview mascots/drift.ts   # renders front, side, back, face close-up & all 10 moods to PNG