Most websites are flat. Wobnimo wants to give yours a face. It is an open source, dependency-free WebGL2 engine that adds living, animated 3D mascots to a web app in about 25KB, no model files and no heavy 3D framework required (Pouryaak).
The project launched on 23 October 2026 and already ships 20 characters, each with 10 reactive states, from idle and thinking to celebrating and sad. A single mascot drops into React or plain HTML with two lines of code, and it can mirror an AI chat's status automatically: thinking while a request runs, speaking while a reply streams, celebrating when a task finishes.
Key Takeaways
Wobnimo is a dependency-free WebGL2 engine that renders 3D mascots in about 25KB, with no meshes, textures, or model files.
It now ships 20 characters, each with 10 states such as idle, thinking, listening, speaking, working, and celebrating.
Mascots work in React, plain HTML, Vue, and Svelte, and can follow an AI chat's status through one prop.
The engine is MIT licensed, so you can use it in commercial projects for free.
Watch the 30-second repo signal: Add 3D Mascots to Your Web App in 25KB
What Is Wobnimo?
Wobnimo describes itself as "Ten living 3D mascots on one ~25 KB web animation engine" (Pouryaak). That tagline comes from launch, when the cast had 10 characters. The current docs list 20 characters, including Mochi, Volt, Pip, Boo, and Miso, so the cast has doubled in about a week.
Unlike a typical 3D setup, there is nothing to download per character. Each mascot is a CharacterSpec, plain data describing materials, bones, SDF parts, paints, eyes, and face. That spec compiles into one GLSL fragment shader per character, and the mascot is rendered by raymarching in WebGL2: each pixel shoots a ray that steps forward by the SDF distance until it hits the surface. Lighting, rim light, and a fake subsurface glow all happen in the same shader.
WebGL2 itself is the browser's second-generation 3D context, closely aligned with the OpenGL ES 3.0 API (Khronos Group). Wobnimo targets it directly, which is how it avoids bundling a general purpose 3D framework at all.
Why 25KB Matters
The author's contrast is blunt: "Three.js plus a GLB model is hundreds of KB before you've animated anything" (Pouryaak). That is the author's claim, not an independent benchmark, but the direction is clear: a mascot should not cost more bandwidth than the page around it.
Wobnimo's own numbers are consistent across its docs: about 25KB gzipped for the engine, about 1.2KB per character import, and 23.7KB gzipped on the playground (Pouryaak). All mascots on a page share one WebGL2 context, off-screen mascots sleep, and the engine honours prefers-reduced-motion. For a landing page, a docs site, or an AI chat widget, that is the difference between a mascot that ships and one that gets cut for performance.
Ten States, No Animation Clips
Wobnimo mascots do not play canned animation clips. Every bone is driven by springs, so a state change produces squash, overshoot, and wobble instead of a hard cut. Mochi's sprout, for example, is a jiggle bone that lags behind the body.
The 10 states, set through a state prop or mascot.setState(), are:
Aspect | Detail |
|---|---|
Idle | Waiting for the user |
Thinking | Request sent, no reply yet |
Listening | User typing or talking |
Speaking | Reply streaming in |
Sleeping | Idle for a couple of minutes |
Working | Running a tool, build, or long task |
Error | Something failed |
Surprised | Unexpected event |
Celebrating | Task finished, tests passed |
Sad | Could not help |
This state model is what makes Wobnimo more than decoration. A mascot that shows "working" during a build or "error" when a request fails communicates system status at a glance, the same way a loading spinner does, only with a face.
Drop It Into React, HTML, Vue, or Svelte
Installation is one command:
npm i wobnimo
In React, the mascot is a component:
import { Mascot } from 'wobnimo/react'
<Mascot character="mochi" state="thinking" />
In plain HTML, no build step is needed: load the CDN script and add <wobnimo-mascot character="mochi" state="thinking"></wobnimo-mascot>. Vue, Svelte, and plain JavaScript use the web component through wobnimo/element, and a programmatic mount(el, mochi) API covers everything else.
The neatest trick is AI chat integration. With the Vercel AI SDK, you pass useChat's status straight in as one prop, and the mascot follows the conversation on its own: submitted becomes thinking, streaming becomes speaking, and error becomes the error state. The useChat status values of submitted, streaming, ready, and error are documented in independent AI SDK guides (Umesh Malik), which corroborates the mapping Wobnimo advertises.
Make Your Own Mascot
Wobnimo is also built for agent-assisted character creation. npx wobnimo skill installs an agent skill for designing characters, npx wobnimo check measures real 3D geometry and reports exact coordinate fixes, and npx wobnimo preview renders a contact sheet with front, side, back, face close-up, and all 10 states. The playground notes that half of the current 20 character cast was generated from one-sentence descriptions (Pouryaak).
Live recolouring is available through setPalette() with no rebuild, so one mascot can match different brand themes. The stated roadmap includes a WebGPU renderer, a Rust and WebAssembly core, and a visual character editor. Those are stated intentions, not shipped features.
Who Should Try Wobnimo?
Wobnimo fits best where a face adds clarity, not just charm:
AI chat and agent products, where the mascot mirrors request status.
Landing pages and docs sites that want a memorable character without a heavy 3D bundle.
Indie hackers and small teams who cannot justify a 3D artist or a large animation pipeline.
Developers building mascots with AI coding agents, using the skill and check tooling.
It is less suited to projects that need realistic 3D, complex scenes, or physics. Wobnimo renders one character at a time per element, stylized and simple by design.
Wobnimo vs the Traditional 3D Route
Aspect | Wobnimo | Three.js plus a GLB model |
|---|---|---|
Bundle size | About 25KB gzipped, zero dependencies | Hundreds of KB before animation, per the author |
Model files | None, characters are plain data | GLB or other model files required |
Animation | Spring-driven states, no clips | Clips or code-driven rigs |
Setup | Two lines in React or HTML | Scene, loader, lights, and animation loop |
Best for | Mascots and status faces | Full 3D scenes and realistic rendering |
Frequently Asked Questions
Is Wobnimo really only 25KB?
About 25KB gzipped for the engine, per the official docs, with roughly 1.2KB per character import. The playground reports 23.7KB gzipped, so "about 25KB" is the safe figure.
How many mascots does Wobnimo include?
20 characters at the time of writing, up from 10 at launch. Each character supports the same 10 states.
Does Wobnimo work without React?
Yes. A web component works in plain HTML, Vue, Svelte, and vanilla JavaScript, with no build step required for the CDN version.
Is Wobnimo free for commercial use?
Yes. It is MIT licensed, which permits commercial use, modification, and distribution.
Where can I see Wobnimo in action?
Try the official playground at pouryaak.github.io/wobnimo, or read this post in Indonesian: Wobnimo: Tambahkan Maskot 3D Hidup ke Web App Anda dalam Sekitar 25KB.
Final Verdict
Wobnimo is a small, focused idea executed well: a mascot engine that costs almost nothing to ship and does one job, giving an app a reactive face. The project is only about 11 days old, so expect the cast and the tooling to keep changing, but the core pitch already holds up. If your product has a chat box, a build step, or a waiting state, a 25KB mascot that shows what is happening is an easy win.
Give it a face: install Wobnimo, drop Mochi on your landing page, and let it think, speak, and celebrate alongside your users.