Bot Orb — a living face for every bot
Answer me with artifact · 2026-10-20 21:13

Bot Orb — a living face for every bot

Glass blob + two eyes, inspired by the Kree8 mascot post. Driven by the bot's real state and voice.

Lead: Add Orb as a bot look. It is the bot's face everywhere a bot shows up. It moves only when the bot's real state changes, so it tells you what the bot is doing before you read anything.

A

Live prototype — click the states, move the pointer, try the mic

HTML · Bot Orb prototype
B

What it's for

  • Memorable bots. Each bot gets its own tint from its id, so you can tell your bots apart at a glance.
  • Status without text. Listening, thinking, working, speaking and "needs you" each look different.
  • A face for voice. The orb reacts to your mic level while it listens and to its own voice while it speaks.
  • Tap to talk. Clicking the orb starts or stops voice with that bot.
  • One component at every size. The same orb works at 16 px in a pill and at 200 px on the stage.
C

States — real signal → what the orb does

State Real signal (already in code) Orb
Idle run slow breathe, eyes glance around, random blinks
Selected bot picked in chat (@-mention, pill, thread) small hop, eyes open wide, greeting under it
Listening voice listening / hearing body swells with mic level, eyes big, looking at you
Thinking voice thinking, model streaming before text body shrinks to a core, rim spins fast, eyes look up
Working tool call running (useAvatarActivity) eyes scan side to side, rim speeds up
Speaking voice speaking + outputLevel() body and eyes pulse with the spoken audio
Needs you approval / question card waiting eyes look at the composer, small nudge
Muted voice muted eyes closed
Error run or voice error eyes flatten, motion nearly stops

All states: eyes follow the pointer on hover. A click makes the orb squish. Reduced motion shows one still frame with open eyes.

D

Where it shows

launch stage (160 px + greeting)full screen stage + inline voice barPick look "Orb" (lookpicker, Edit bot)config.avatar.look = orbBotAvatar(ResolvedBotAvatarbranch)Pills, thread header,transcript (16-24 px)Bot selected in chatVoiceDesktop pet + agentcursor
E

Build plan

  1. BotOrb component (src/components/bots/orb/). Owned canvas 2D, no new package, no WebGL, so it runs in Safari 17. One shared animation loop for every orb on screen. Each orb pauses when it is off screen or the tab is hidden.
  2. Look + storage. Add the orb look to bot-looks.ts. Add orbTint (optional) to AvatarConfig. The default tint comes from the bot id. Add a tint row to the look picker and Edit bot.
  3. Render branch. Add orb to ResolvedBotAvatar, LayerArt and LookThumb (BotAvatar.tsx:643, BotLookStage.tsx:148,300).
  4. State in. BotOrb reads useAvatarActivity(). VoiceBotAvatar provides the voice phase and the level() / outputLevel() functions through context. The orb reads levels in its own loop, with no React re-render per frame.
  5. Selected stage. When you pick a bot in chat, LaunchHeader (44 px today) grows into a 160 px stage with the greeting. The BotChatSessionView.tsx:1386 empty state gets the same stage. A click on the stage orb starts voice.
  6. Voice bar. VoiceBar shows the bot's avatar instead of the generic VoiceOrb when a bot is in the chat. This works for every look, not only Orb.
  7. Fix in scope: ActiveAgentMascot.tsx:121 ignores the main bot's picked look. It must honor the pick.
  8. Phone + PWA. Same BotChatSessionView and VoiceSession code, with phone sizing (stage 120 px). PWA deploy is a manual step after your go-ahead.
  9. Docs. User guide: "Bot looks → Orb". Dev docs: the BotOrb states contract. Run check_links.py and the MDX check.
  10. Ship. One build and one live check at the end on Desktop, the ai.allternit.com phone view and the PWA.
F

Your calls

Who gets the Orb look?
What does a click on the orb do?
The main A:// bot