Cameo

The four characters that ship with the package, live. Move the cursor near them.

My Role: Design and engineering
Timeline: 2025 – 2026
Links: Playground · npm

Where it started

About a year ago, talking to an AI felt like reading a wall of text. I thought it could have far more personality than that, and I kept coming back to the robots in WALL-E, who show who they are with little more than a pair of eyes.

I designed a character along those lines in Figma, and there it sat for a long time. What got it moving was a post from Benji Taylor, who had animated a character for Grok entirely in code. It was only a circle with eyes, but it expressed everything the product needed. That was the push to build mine the same way.

The goal was a system, not a mascot: one face that can show everything an AI product now shows with spinners, icons and text, and with enough personality that it is not boring. The four at the top of this page are the real thing running, not a recording.

Three ways to direct it

A product should not have to animate a face. It only says what is happening, and the character works out how to show it. There are three things a product can say.

A state is what the product is doing right now. It stays until the product changes it: thinking for as long as a request takes, speaking while the answer plays.
A gesture is one movement that plays once and ends by itself, like a nod or a wink.
An event is something that just happened, such as a success or an error. The face reacts for a moment, and then goes back to the state it was in.

Try each one below. The lever is a state, the keys are gestures, and the lamps at the back are events. The paper strip along the front draws what the face did, which shows the difference at a glance: a step that stays up, a short spike, and a bump that comes back down.

Stateheld

Gestureplays once

Eventreacts, then back

A state lasts until something changes it. A gesture happens once. An event is a brief reaction, after which the face returns to what it was doing.

Emotions such as love or surprise exist too, but they work better as short reactions than as states. A face that stays delighted stops meaning anything.

What it notices by itself

Some behaviour needs no code at all, because the character watches the page it sits on. It follows the cursor, listens while someone is typing, winks when something is copied, and falls asleep when nothing happens.

All of that runs on one number: attention. Anything that happens nearby raises it, and time lowers it. How high it is decides how awake the character looks: attentive, idle, drowsy or asleep.

The tank below is that number. Press an event to fill it, then leave it alone and watch it drain.

Eventfills to its mark

Leavingempties it

Attentionnow

70% idle

Attention jumps the moment something happens and fades slowly when nothing does, so the character wakes at once but takes its time falling asleep. Shown at three times real speed.

Two details here are deliberate. An event fills the tank to its own mark and no higher, so a hundred clicks cannot make the character more alert than one. And it falls asleep slowly but wakes at once, which is what makes it seem eager.

It reacts to what is being said

When the character speaks, its face follows the real sound. The eyes move with how loud the voice is, and the head dips on the words that are stressed. Given a microphone, it starts listening when someone actually speaks and relaxes when they stop.

It also reacts to what is being said. In the tour, every sentence goes to Jev, a fast model from TypeSafe that reads its mood: excited, curious, surprised, an error, frustrated or sad.

The surprising part is the timing: the face changes while the sentence is still being spoken. The tape deck below shows why, in three numbered steps. The words are written 1, their mood is read 2 a third of a second later, and only after that does the voice finish saying them 3.

PIP sounding

“Oh no, something went wrong.”

1Words written–
2Read: the face changes–
3Voice finishes–

The character knows the mood of a sentence before it has finished saying it, so its face changes mid-sentence, the way a person's does.

How a mood is picked up

1The words are written. The voice model sends a transcript of what it is saying, about a second ahead of the sound. On the deck, that is the tape reaching the reading head.
2The sentence is read, and the face changes. Each finished sentence goes to Jev, and its mood comes back in about a third of a second. The strongest mood picks the face, and how sure the reading is sets how big the reaction is.
3The voice finishes the sentence. By then the face has already changed, usually more than half a second earlier. That gap is the tape still travelling to the playing head.

The tape is PIP's real voice from a live session, and every lamp lights at the moment its reading came back. In the tour the same reading also picks which photos come to the centre. The reactions are short and silent on purpose: a guide should look attentive, not like a puppet show.

How it moves

Most animation moves forward one frame at a time. Cameo's engine works differently: give it any moment in time and it works out the face for that moment directly. So it can pause, skip ahead or run backwards without losing its place, and a face scrolled off the page costs nothing.

The disc below is one change of expression, cut like a groove in a record. Drag the slider to any moment. Then switch off one of the five details that make the change feel alive, and watch its groove go flat:

Anticipation. The eyes squint for a moment before they open wide.
Eyes lead. The eyes move first and the body follows.
Blink. A quick blink as the change begins.
Settle. The eyes go slightly too far, then come back.
Head arc. The head travels in a curve, not a straight line.

Momentturn to any

−100 ms

Change tofrom rest

Carried bytap to remove

A movement is not played forward frame by frame. Every moment of it exists at once, so the face can be worked out for any point in time.

Those five are how a change is carried. A second set of controls covers what the character does without being asked: blinking, glancing around, breathing, and how long its attention lasts. And if a visitor has asked their device for reduced motion, the character respects that, always.

One family, many faces

Four characters ship with the package: Jade, Nova, Pip and Tide. Each has its own head shape, eyes and colour, and all share the same cream shell and recessed screen, so they read as one family. Any closed outline, such as a logo, can become a head, with the screen and eyes fitted inside.

Colour carries meaning, which sets a limit. An error turns the face red on every character, so a character that is already red would show it less clearly.

Designed for the people building with it

A package is used through its code, so that was designed too. A complete character is one line. State names are typed, so an editor suggests them. Sound is off until someone asks for it. The documentation has recipes for a chat assistant, a voice assistant and a corner avatar, and a plain-text version written for coding agents.

In use: PIP gives a tour

To see what the character adds to a real conversation, I built a spoken tour of my own background. PIP, one of the four characters, answers questions out loud. Its face follows its own voice and the mood of each sentence, and when it mentions a real moment, the photo of that moment comes to the centre of the stage. Point at a photo and it tells you the story behind it.

0:00

BY INVITATION

Try it yourself

Ask PIP about me.