Cast

The named characters, one per shape. Each is a shape, an ink and a little personality — nothing a { shape, color } pair could not reproduce, given a name so a product can offer "pick a character" instead of "pick a shape and an ink". The cast matches the shapes one to one: a shape the engine adds must come with its name.

Mochi糯糯mochi

A soft rice cake with a flat seat and a round head — the default friend.

shape: mochiMochi
color: blueBlue
accent: #0D7EFF

Dot圆圆dot

A plain orange circle, the shape every face was first drawn on.

shape: circleCircle
color: orangeOrange
accent: #F25C0F

Pip团团pip

A soft cyan blob that never quite sits still.

shape: blobBlob
color: cyanCyan
accent: #0899B8

Byte比特byte

A pebble-round little shell in calm device violet.

shape: pebblePebble
color: violetViolet
accent: #6F55E0

Momo桃桃momo

A peach-pink egg, pointy on top and plump below — the steadiest sitter of the family.

shape: eggEgg
color: redRed
accent: #E0363A

Bao包包bao

A warm little bun with a knot on top.

shape: bunBun
color: yellowAmber
accent: #E9A20C

Teal青青teal

A lake-teal block of tofu: square without corners, round without slouching.

shape: tofuTofu
color: cyanCyan
accent: #0899B8

Tato薯薯tato

A pill on its side: round caps, a straight middle, and zero ability to sit still.

shape: pillPill
color: redRed
accent: #E0363A

Hexa六六hexa

A rounded hexagon in lake teal, every corner worn soft.

shape: hexHexagon
color: cyanCyan
accent: #0899B8

Tri尖尖tri

A rice ball of a triangle that hops sharp and lands steady.

shape: onigiriOnigiri
color: magentaMagenta
accent: #D12D8C

Gemma晶晶gemma

A soft-cut gem with a pale crown and every corner rounded.

shape: gemGem
color: cyanCyan
accent: #0899B8

Nimbo云宝nimbo

A puffy scallop-edged cloud that drifts half a beat behind the world.

shape: cloudCloud
color: blueBlue
accent: #0D7EFF

Dew滴滴dew

A sky-blue droplet that lands without ever losing its plump shine.

shape: dropDrop
color: blueBlue
accent: #0D7EFF

Leafy叶叶leafy

A tilted leaf with a little stem, as if it just decided to unfurl.

shape: leafLeaf
color: greenGreen
accent: #1B9A5C

Bloom仙仙bloom

A rose flower with soft scalloped petals and a calm face in the middle.

shape: flowerFlower
color: magentaMagenta
accent: #D12D8C

Lucky幸幸lucky

Four plump leaves and a calm face in the middle, good luck without the fuss.

shape: cloverClover
color: greenGreen
accent: #1B9A5C

Sprout芽芽sprout

A round little seed with two leaves, as if it just decided to grow.

shape: sproutSprout
color: greenGreen
accent: #1B9A5C

Shroom菇菇shroom

A red-capped mushroom with three pale spots and a thick stalk.

shape: mushroomMushroom
color: redRed
accent: #E0363A

Oak橡橡oak

A brown acorn in a cap one size too big, hoarding small secrets.

shape: acornAcorn
color: brownBrown
accent: #C46A32

Pokey刺刺pokey

A round-armed cactus that hugs from a polite distance.

shape: cactusCactus
color: greenGreen
accent: #1B9A5C

Nashi梨梨nashi

A plump little pear with a leaf on its stem, round at the top and wide at the seat.

shape: pearPear
color: yellowAmber
accent: #E9A20C

Pomme苹苹pomme

A green apple with a deep dimple and one leaf, crisp even when it is sad.

shape: appleApple
color: greenGreen
accent: #1B9A5C

Berry莓莓berry

A red strawberry in a green crown and a face full of freckles, sweet with a little sour.

shape: strawberryStrawberry
color: redRed
accent: #E0363A

Cheri樱樱cheri

Two cherries on one stalk; the big one does the talking.

shape: cherryCherry
color: magentaMagenta
accent: #D12D8C

Twinkle亮亮twinkle

A soft five-point star, round-tipped and glowing gold.

shape: starStar
color: yellowAmber
accent: #E9A20C

Luv心心luv

A plump red heart that wears its feelings in the middle of its face.

shape: heartHeart
color: redRed
accent: #E0363A

Ember焰焰ember

A little flame leaning sideways, tip flicking in the breeze.

shape: flameFlame
color: orangeOrange
accent: #F25C0F

Chime叮叮chime

A violet bell with a round clapper, swaying one beat before it rings.

shape: bellBell
color: violetViolet
accent: #6F55E0

Jelly水灵jelly

A minimalist apricot ghost that drifts along, always unhurried.

shape: ghostGhost
color: orangeOrange
accent: #F25C0F

Beep哔哔beep

A cyan little robot with a bobbing antenna and a rounded-square head.

shape: botBot
color: cyanCyan
accent: #0899B8

Luna露娜luna

A plump crescent, forever on the edge of sleep.

shape: crescentCrescent
color: yellowAmber
accent: #E9A20C

Boba波波boba

A brown milk tea with three pearls at the bottom and a straw pointing at the sky.

shape: bobaBoba tea
color: brownBrown
accent: #C46A32

Finn鱼鱼finn

A round cyan fish with a big forked tail, swimming in place.

shape: fishFish
color: cyanCyan
accent: #0899B8

Inky墨墨inky

A violet octopus with four fat legs that never agree on a direction.

shape: octopusOctopus
color: violetViolet
accent: #6F55E0

Miso喵喵miso

An orange cat with two pointed ears, curious about everything within reach.

shape: catCat
color: orangeOrange
accent: #F25C0F

Hop跳跳hop

A pink bunny with long ears and a round seat, always about to jump.

shape: bunnyBunny
color: magentaMagenta
accent: #D12D8C

Bruno熊熊bruno

A round brown bear with two small ears and a very soft heart.

shape: bearBear
color: brownBrown
accent: #C46A32

Chirp啾啾chirp

A yellow chick, all fluff, a tuft on top and tiny feet.

shape: chickChick
color: yellowAmber
accent: #E9A20C

Waddle摇摇waddle

A penguin with a pale round belly, rocking from side to side.

shape: penguinPenguin
color: blueBlue
accent: #0D7EFF

Oink哼哼oink

A pink pig with folded ears and a big round snout, always sniffing out a snack.

shape: pigPig
color: pinkPink
accent: #E8628F

Rusty狐狐rusty

An orange fox with a heart-shaped face and a white chin, sly in a very polite way.

shape: foxFox
color: orangeOrange
accent: #F25C0F

Kiki琪琪kiki

A straight-banged bob in warm brown, neat to the last strand.

shape: bobBob
color: brownBrown
accent: #C46A32

Maru丸丸maru

A pink top knot, tied up high and ready for anything.

shape: topknotTop knot
color: pinkPink
accent: #E8628F

Zip小刺zip

Blue spikes that never lie down, whatever the comb says.

shape: spikySpiky
color: blueBlue
accent: #0D7EFF

Fuzz卷卷fuzz

A green cloud of curls with a very calm face underneath.

shape: curlyCurly
color: greenGreen
accent: #1B9A5C

Lulu露露lulu

Two violet buns, one on each side, perfectly even.

shape: twinbunsTwin buns
color: violetViolet
accent: #6F55E0

Tour walks a card through every protocol id in turn.

Using a preset

<CharacterMark preset="bao" state="happy" />
<StagedMark preset="dew" />
<AgentAvatar agent={{ id: 'u-1', preset: 'nimbo' }} />

A preset supplies shape and color when they are not given, and nothing else: passing shape alongside preset overrides the preset's shape. It is a convenience layer over the primitives, not a new axis.

{
  "id": "bao",
  "name": {
    "en": "Bao",
    "zh": "包包"
  },
  "desc": {
    "en": "A warm little bun with a knot on top.",
    "zh": "奶黄小馒头，头顶一个小揪揪，热乎乎的。"
  },
  "shape": "bun",
  "color": "yellow",
  "accent": "#E9A20C"
}

import { CharacterMark, castMember } from '@aora-bot/react';

export default function Demo() {
  const bao = castMember('bao');
  return (
    <div className="site-demo">
      <CharacterMark preset="bao" state="happy" sizePx={96} />
      <CharacterMark preset="bao" color="violet" state="happy" sizePx={96} />
      <CharacterMark preset="bao" shape="cloud" state="happy" sizePx={96} />
      <pre style={{ margin: 0, fontSize: 12 }}>{JSON.stringify(bao, null, 2)}</pre>
    </div>
  );
}

What a preset carries

interface CharacterPreset {
  id: CastId;
  name: { en: string; zh: string };
  desc: { en: string; zh: string };
  shape: ShapeId;
  color: ColorId;
  accent: string; // the hex the character was designed in
  face?: FaceStyle; // for presets drawn as line faces
  nose?: NoseId;
}

color is the nearest palette entry and is what renders. accent is the exact hue the character was drawn in; it is kept for documentation swatches and for hosts with their own palette. No shipped member sets face or nose — the cast keeps the default face — but a host's own presets can, and every picker honours them.

Looking one up

castMember('mochi'); // CharacterPreset
castMember('nobody'); // null — a stored preference can go stale safely
isCastId('byte'); // true
CAST_IDS; // ['mochi', 'dot', 'pip', 'byte', …]

castMember returns null rather than throwing for an unknown id, so a stored preference that names an unknown id degrades to the default character instead of crashing the page.

Shapes — the drawing behind each character
CastStage — several characters entering in turn

#Cast

#Using a preset

#What a preset carries

#Looking one up

#Next

Cast

Using a preset

What a preset carries

Looking one up

Next