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

说明与用途

Wobnimo 是一个轻量级的 3D 角色库，开发者只需两行 HTML 即可将交互式角色嵌入 AI 聊天窗口，无需构建步骤和依赖。

问题

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

结果

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.

工作流

• 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.

证据

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

来源

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

来源

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

来源