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

Описание и применение

Веб‑пакет Wobnimo позволяет быстро добавить в чат‑бота 3D‑маскот, реагирующий на состояние модели, без сборки и зависимостей.

Задача

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.

Источник