namabotsmascot v3 Playground →
Mascot v3

Nama gets hands and legs.

Same jelly, same colours, same element. v3 adds floating mitten hands, a real mouth, sticker-style emotes with speech bubbles. Hand and leg are on by default everywhere: app, landing, design site, sheets, avatars and the wordmark. Showing the mascot without them is a playground-only option (its Hand and leg switch).

Tap the big one for a random sticker.

01 · What changes

v2 → v3

New

Floating mitten hands

Two hands, no arms, in the style of Rayman. The silhouette stays a clean bean, and any pose is just a position plus a hand shape.

New

Mouth and ink eyes

Dark anime eyes with white highlights, plus 13 mouths. v2 carried everything in the eyes; the stickers need a mouth. The white v2 eyes are still an option.

New

16 sticker emotes

Rebuilt from the reference sheet, each with a speech bubble in its own colour. Bubbles can be switched off.

New

Gestures for agent states

Typing while working, hand up while waiting, hands on head on error, thumbs up when approved, coffee while rate-limited.

New

Hand and leg, always on

Updated 2026-10-15. The tiny feet grew into two short stubby legs, and hands plus legs now show at every size. Only the playground can switch them off.

Kept

Everything else

Jelly and candy materials, the 9 agent colours, light mode, the spring physics and the blink-swap.

02 · Hand and leg

Mittens and stubby legs, always on

Standard (2026-10-15): every namabots mascot has two hands and two legs by default, in every context: the app (rosters, chat headers, message rows, agent pages), namabots.com, design.namabots.com, the mascot sheet, icons and the wordmark logo, at every size. "Without hand and leg" exists only as a switch on the playground; it hides hands and legs together, never one without the other. In code that is limbs="off", and nothing outside the playground should set it.

Legs: two short stubs that tuck under the body, each ending in a rounded foot, about a quarter of the body height below the body. Same gel as the hands: the agent's own diagonal gradient (light top-left to the darker stop bottom-right), the same white shine on the foot, no outline. They sit at a third of the body width from the centre, ride every hop, squash and tilt with the body, and the ground shadow moves down to sit under the feet. Poses that used to park the paws on the ground (Paws on desk for sleeping, Typing for working) now rest them on the lap, with the keyboard held in front of the belly, so hands and legs both stay visible. Hands and legs always take the mascot's own colourway: the hero stays brand cyan (#22d3ee to #0891b2) and every agent keeps its own distinct colour on body, hands and legs alike.

Each hand is about a third of the body's height and made of the same gel as the body: same gradient, same jelly or candy shading, same white shine, no outline. A soft contact shadow, not a line, separates hand from body. The light stays fixed as the hand turns, so the shine is always top-left like the body's. The hands follow the body on soft springs, so they trail a moment behind every hop and swing back into place. A new pose pops the hand (it shrinks and springs back) as it changes shape.

Do keep at least one eye visible in every pose.
Don't draw arms or wrists. The gap between body and hand is the style.
Do keep hand and leg on at every size, 16 px rows included. Below 40 px the status light rides along to carry the state.
Don't ship a mascot without hand and leg. limbs="off" is a playground-only comparison, and it removes both together.
Don't draw thighs, knees or long legs. Two short stubs and a rounded foot, tucked under the body.
Don't give hands more than three fingers. Mitten, fist and one or two raised fingers only.
03 · Gestures

Hand poses

Each pose is a position, rotation and shape per hand, plus an optional loop (waving, typing, bouncing fists) and an optional held object.

04 · Wardrobe

Hats and things to hold

Back from v2, now with hands: hats sit on the head and tools are held in the right hand (put away while that hand is busy with a gesture). Agents with a role wear their v2 perk from 60 px: Vigil's wrench, Cloudy's magnifier, Claudie's hard hat, Loop's pencil. Use outfit and tool to dress any mascot, or none to switch a perk off.

05 · Stickers

16 emotes

One for each sticker on the reference sheet: eyes, mouth, hands, manga marks, a motion loop, sometimes a prop or accessory, and a speech bubble. Use them for moments, not for status. They play once (about 3 s) and fall back to the agent's state.

06 · Agent states

What the app shows

The 11 states from v2, now with a gesture each. These are what app.namabots.com would use once v3 is approved.

07 · Sizes

Detail by size

Every size: body, eyes, hands and legs. Below 30 px: plus the status light. From 30 px: mouth, blush and marks. From 40 px: the gesture carries the state, so the status light goes away. From 56 px: speech bubbles. At favicon size (16 px) the limbs read as small bumps; that is fine.

08 · Build

How it's made

The same <nama-bot> element as v2, so it drops into namabots.com and app.namabots.com without code changes. Plain SVG, no libraries.

<script src="nama-bot.js"></script>
<nama-bot agent="claudie" state="working" size="96"></nama-bot>
<nama-bot emote="love" bubble="off"></nama-bot>
<nama-bot gesture="wave" material="candy" surface="light" face="glow" interactive follow></nama-bot>
AttributeValues
stateidle, greeting, working, thinking, question, waiting, approved, rejected, paused, error, sleeping
emotewaaah, huuu, night, wow, hmm, love, hays, haha, yeah, awoo, yum, grrr, lah, cute, cool, sorry
gesture
outfitparty, santa, grad, phones, hardhat, crown, beanie, bow, flower, diya, none
toolwrench, magnifier, pencil, wand, balloon, diya, none (held in the right hand)
limbson (default, every size and in logo mode), off (playground only: hides hands and legs together). Legacy hands="off" is an alias of limbs="off"; hands="auto|on" now just mean on.
bubbleon (default), off
faceink (default, v3), glow (white v2 eyes)
colorThe app colour names: cyan, violet, amber, emerald, rose, indigo, fuchsia, orange, lime, sky
glowSoft halo behind the mascot, tinted by its state
agent, material, surface, size, interactive, followSame as v2. Old v2 emote names (proud, shy, nervous…) map to the nearest v3 sticker.

Performance

Same budget as v2: one shared clock, 30 fps cap, 10 fps while asleep, and off-screen mascots skip frames entirely.

Where it runs

namabots.com and app.namabots.com. The 3D (WebGL) tier from v2 is retired: the SVG mascot carries hands, stickers and bubbles at any size.