Sebagian besar website itu datar. Wobnimo ingin memberi website Anda sebuah wajah. Ini adalah engine WebGL2 sumber terbuka tanpa dependensi yang menambahkan maskot 3D yang hidup dan beranimasi ke web app dalam sekitar 25KB, tanpa file model dan tanpa framework 3D yang berat (Pouryaak).
Proyek ini diluncurkan pada 23 Oktober 2026 dan sudah menghadirkan 20 karakter, masing-masing dengan 10 status reaktif, dari idle dan thinking sampai celebrating dan sad. Satu maskot bisa dipasang di React atau HTML biasa hanya dengan dua baris kode, dan maskot ini bisa mengikuti status AI chat secara otomatis: thinking saat request berjalan, speaking saat balasan mengalir, celebrating saat tugas selesai.
Poin Penting
Wobnimo adalah engine WebGL2 tanpa dependensi yang merender maskot 3D dalam sekitar 25KB, tanpa mesh, tekstur, atau file model.
Kini tersedia 20 karakter, masing-masing dengan 10 status seperti idle, thinking, listening, speaking, working, dan celebrating.
Maskot bekerja di React, HTML biasa, Vue, dan Svelte, dan bisa mengikuti status AI chat lewat satu prop.
Engine ini berlisensi MIT, jadi Anda bisa memakainya di proyek komersial secara gratis.
Tonton sinyal repo 30 detiknya: Add 3D Mascots to Your Web App in 25KB
Apa Itu Wobnimo?
Wobnimo menggambarkan dirinya sebagai "Ten living 3D mascots on one ~25 KB web animation engine" (Pouryaak). Tagline itu berasal dari peluncuran, saat jumlah karakternya masih 10. Dokumen terbarunya mencantumkan 20 karakter, termasuk Mochi, Volt, Pip, Boo, dan Miso, jadi jumlah karakternya sudah berlipat ganda dalam sekitar seminggu.
Berbeda dengan setup 3D pada umumnya, tidak ada yang perlu diunduh per karakter. Setiap maskot adalah CharacterSpec, data biasa yang menjelaskan material, tulang, bagian SDF, cat, mata, dan wajah. Spec itu dikompilasi menjadi satu GLSL fragment shader per karakter, dan maskot dirender lewat raymarching di WebGL2: setiap piksel menembakkan sinar yang melangkah maju sejauh jarak SDF sampai menyentuh permukaan. Pencahayaan, rim light, dan efek subsurface glow palsu semuanya terjadi di shader yang sama.
WebGL2 sendiri adalah konteks 3D generasi kedua di browser, yang selaras dengan API OpenGL ES 3.0 (Khronos Group). Wobnimo menargetkannya secara langsung, dan itulah cara proyek ini menghindari bundling framework 3D serbaguna sama sekali.
Kenapa 25KB Itu Penting
Perbandingan dari penulisnya cukup tajam: "Three.js plus a GLB model is hundreds of KB before you've animated anything" (Pouryaak). Itu adalah klaim penulis, bukan benchmark independen, tapi arahnya jelas: sebuah maskot seharusnya tidak memakan bandwidth lebih besar dari halaman di sekitarnya.
Angka Wobnimo sendiri konsisten di semua dokumennya: sekitar 25KB gzipped untuk engine, sekitar 1,2KB per import karakter, dan 23,7KB gzipped di playground (Pouryaak). Semua maskot di satu halaman berbagi satu konteks WebGL2, maskot yang di luar layar akan tidur, dan engine menghormati prefers-reduced-motion. Untuk landing page, situs dokumentasi, atau widget AI chat, itulah perbedaan antara maskot yang jadi dipakai dan maskot yang dicoret demi performa.
Sepuluh Status, Tanpa Klip Animasi
Maskot Wobnimo tidak memainkan klip animasi yang direkam sebelumnya. Setiap tulang digerakkan oleh spring, jadi perubahan status menghasilkan efek squash, overshoot, dan wobble, bukan potongan yang kaku. Tunas Mochi, misalnya, adalah jiggle bone yang tertinggal di belakang badannya.
Ke-10 status itu, diatur lewat prop state atau mascot.setState(), adalah:
Aspek | Detail |
|---|---|
Idle | Menunggu pengguna |
Thinking | Request terkirim, balasan belum datang |
Listening | Pengguna sedang mengetik atau berbicara |
Speaking | Balasan sedang mengalir |
Sleeping | Menganggur selama beberapa menit |
Working | Menjalankan tool, build, atau tugas panjang |
Error | Terjadi kegagalan |
Surprised | Kejadian tak terduga |
Celebrating | Tugas selesai, tes lolos |
Sad | Tidak bisa membantu |
Model status inilah yang membuat Wobnimo lebih dari sekadar hiasan. Maskot yang menunjukkan "working" selama build atau "error" saat request gagal mengomunikasikan status sistem sekilas, sama seperti loading spinner, hanya saja dengan wajah.
Pasang di React, HTML, Vue, atau Svelte
Instalasi hanya satu perintah:
npm i wobnimo
Di React, maskot adalah sebuah komponen:
import { Mascot } from 'wobnimo/react'
<Mascot character="mochi" state="thinking" />
Di HTML biasa, tidak perlu build step: muat skrip CDN lalu tambahkan <wobnimo-mascot character="mochi" state="thinking"></wobnimo-mascot>. Vue, Svelte, dan JavaScript biasa memakai web component lewat wobnimo/element, dan API programatik mount(el, mochi) mencakup sisanya.
Trik paling rapi adalah integrasi AI chat. Dengan Vercel AI SDK, Anda cukup mengoper status dari useChat sebagai satu prop, dan maskot akan mengikuti percakapan dengan sendirinya: submitted menjadi thinking, streaming menjadi speaking, dan error menjadi status error. Nilai status useChat berupa submitted, streaming, ready, dan error didokumentasikan di panduan AI SDK independen (Umesh Malik), yang menguatkan pemetaan yang diiklankan Wobnimo.
Buat Maskot Anda Sendiri
Wobnimo juga dibuat untuk pembuatan karakter berbantuan agen AI. npx wobnimo skill memasang agent skill untuk merancang karakter, npx wobnimo check mengukur geometri 3D asli dan melaporkan perbaikan koordinat yang tepat, dan npx wobnimo preview merender contact sheet berisi tampak depan, samping, belakang, close-up wajah, dan semua 10 status. Playground mencatat bahwa separuh dari 20 karakter saat ini dibuat dari deskripsi satu kalimat (Pouryaak).
Pewarnaan ulang secara live tersedia lewat setPalette() tanpa rebuild, jadi satu maskot bisa menyesuaikan tema brand yang berbeda. Roadmap yang dinyatakan mencakup renderer WebGPU, core Rust dan WebAssembly, serta editor karakter visual. Itu adalah rencana yang dinyatakan, bukan fitur yang sudah rilis.
Siapa yang Sebaiknya Mencoba Wobnimo?
Wobnimo paling cocok di tempat wajah menambah kejelasan, bukan sekadar daya tarik:
Produk AI chat dan agen AI, tempat maskot mencerminkan status request.
Landing page dan situs dokumentasi yang ingin karakter mudah diingat tanpa bundle 3D yang berat.
Indie hacker dan tim kecil yang tidak bisa membenarkan jasa seniman 3D atau pipeline animasi besar.
Developer yang membuat maskot dengan AI coding agent, memakai tooling skill dan check.
Proyek ini kurang cocok untuk kebutuhan 3D realistis, scene kompleks, atau fisika. Wobnimo merender satu karakter per elemen, bergaya sederhana sesuai desainnya.
Wobnimo vs Jalur 3D Tradisional
Aspek | Wobnimo | Three.js plus model GLB |
|---|---|---|
Ukuran bundle | Sekitar 25KB gzipped, tanpa dependensi | Ratusan KB sebelum animasi, menurut penulis |
File model | Tidak ada, karakter adalah data biasa | File GLB atau model lain wajib ada |
Animasi | Status berbasis spring, tanpa klip | Klip atau rig berbasis kode |
Setup | Dua baris di React atau HTML | Scene, loader, lampu, dan animation loop |
Terbaik untuk | Maskot dan wajah status | Scene 3D lengkap dan rendering realistis |
Pertanyaan yang Sering Diajukan
Apakah Wobnimo benar-benar hanya 25KB?
Sekitar 25KB gzipped untuk engine, menurut dokumen resmi, dengan kira-kira 1,2KB per import karakter. Playground melaporkan 23,7KB gzipped, jadi "sekitar 25KB" adalah angka yang aman.
Berapa maskot yang disertakan Wobnimo?
20 karakter pada saat tulisan ini dibuat, naik dari 10 saat peluncuran. Setiap karakter mendukung 10 status yang sama.
Apakah Wobnimo bisa dipakai tanpa React?
Ya. Web component bekerja di HTML biasa, Vue, Svelte, dan JavaScript vanilla, tanpa build step untuk versi CDN.
Apakah Wobnimo gratis untuk penggunaan komersial?
Ya. Proyek ini berlisensi MIT, yang mengizinkan penggunaan komersial, modifikasi, dan distribusi.
Di mana saya bisa melihat Wobnimo beraksi?
Coba playground resminya di pouryaak.github.io/wobnimo, atau baca post ini dalam bahasa Inggris: Wobnimo: Add Living 3D Mascots to Your Web App in About 25KB.
Putusan Akhir
Wobnimo adalah ide kecil yang dieksekusi dengan baik: engine maskot yang hampir tidak memakan biaya untuk dipakai dan mengerjakan satu tugas, memberi aplikasi sebuah wajah reaktif. Proyek ini baru berusia sekitar 11 hari, jadi jumlah karakter dan toolingnya kemungkinan akan terus berubah, tapi tawaran intinya sudah terbukti. Jika produk Anda punya kotak chat, langkah build, atau status menunggu, maskot 25KB yang menunjukkan apa yang terjadi adalah kemenangan yang mudah.
Beri wajah pada produk Anda: pasang Wobnimo, letakkan Mochi di landing page Anda, dan biarkan ia berpikir, berbicara, dan merayakan bersama pengguna Anda.