Design reference

Joy lab

Every pose, state and animation Joy can hold. Poses are named for what they mean, not what the art shows, so the illustration can change without touching a call site.

State

Backdrop

Poses

welcome

Greeting and idle. The default.

also: wave, explorer, focus, idle, sleeping, hello

guide

Showing the next step. Holds the wand and slate.

also: thinking, reading, planner, magic-stick, loading, think

celebrate

A win — quiz passed, goal finished, certificate earned.

also: happy, excited, highfive, cheer, rocket

encourage

A nudge, a near miss, a streak about to break.

also: wink, nudge

Every pose in every state

The two axes are independent — the decided intent picks the pose, the phase of the interaction picks the state.

State welcomeguidecelebrateencourage
idleBreathing and blinking.
thinkingDeciding. Head tilts, eyes drift.
listeningMic is live. Leans in.
speakingTalking. The mouth moves.
wavingA sustained greeting — three swings, then a rest.
celebratingA backflip: crouch, launch, tuck over the top, land heavy.

Flight

A scene, not a state — it carries whichever pose you give it. Three nested transforms: the crossing, an arc, and a bob-and-bank on its own clock, so the path is compound rather than a slide. Use it rarely; the charm is in it being unexpected.

Avatar crops

Head and ears only, for small circular contexts. These view boxes were estimated from the path coordinates — check nothing clips.

welcome

guide

celebrate

encourage

40px

Reduced motion. Every animation sits behind prefers-reduced-motion: no-preference, so nothing here moves for a student who has asked their device to stop animations. Motion also pauses off-screen and in background tabs.

Backdrops. The art is a single teal/peach palette. Check it against Brand and Signal — those are the surfaces that used to ask for an orange mascot.