I gave my AI chat a face in two lines of HTML (and built the 3D engine behind it)

Description and use

Wobnimo is a lightweight 3D mascot library that lets developers embed a reactive character into AI chat widgets with just two lines of HTML, no build step, and zero dependencies.

Problem

AI chat interfaces lack real‑time, reactive avatars that reflect model state.

Outcome

A 25 KB gzipped mascot library with zero dependencies that renders real‑time 3D characters reacting to AI chat states, enabling developers to embed interactive avatars with minimal code.

Workflow

• 1. Include wobnimo.js via CDN and add <wobnimo-mascot> element with character and state attributes.
• 2. For React/Vercel AI SDK, import Mascot component and pass status prop from useChat.
• 3. Mascot renders a 3D model built from signed distance functions, animated by springs.
• 4. All mascots share a single WebGL context; off‑screen mascots sleep and respect prefers‑reduced‑motion.
• 5. Recolouring is done at runtime via setPalette.
• 6. AI agents can install the library by copying the provided prompt into an agent tool.

Evidence

Two lines in any HTML page. No build step, no config:

Source

One mascot is about 25 KB gzipped, with zero dependencies.

Source

From there, the pipeline is: Compile, Raymarch, Animate with springs, Share one context.

Source