/avatar

name: avatar
description: Draws any object as a flat character with two capsule eyes, then animates its whole body so it glances, blinks, breathes, follows the pointer and falls asleep.
disable-model-invocation: true

Avatar

This skill turns an object into a small living character. It draws one flat silhouette with two capsule eyes, then drives the whole body from one loop so it glances, blinks, breathes and reacts.

Measured eyes, a body that is never still

The gaze, eye and blink values in [face.js](face.js) are measured off reference footage and are exact. The moods past idle are tuned starting points. A character whose eyes move while its body holds still is a finding.

Gathering references belongs to `gather`. Taking a reference animation apart frame by frame belongs to `deconstruct`. Offering silhouette variants belongs to `prototype`. Interface motion and its 300ms budget belong to `motion`, not a character's body. Frame cost belongs to `frames`. Opening the result belongs to `verify`.

1. Study the reference

When the user names a reference character, open its source and step its recording at 10fps. Measure eye size, tilt, spacing and blink timing off the frames. A character drawn from one glance at the reference is `avatar-measure-the-reference`.

Keep measured values as measured. Rounding a `15.5°` eye spacing to `15°` or a `180ms` blink to `200ms` is `avatar-keep-the-measurements`. With no reference named, start from `face.js`.

2. Draw the silhouette

Reduce the object to one flat, solid shape in one saturated colour. An outline, shading, a mouth or a nose is `avatar-flat-silhouette`.

It reads at its shipped size, usually 28–40px. Draw it on a small grid, such as a 14 by 17 viewBox, and crop the viewBox tight to the ink. A part that moves on its own, like a lid, gets its own path.

Pick the view whose outline alone names the object: the side for vessels and tools, the front for devices. Given a role or a hobby, draw its single most iconic object. A view that needs its details to be named is `avatar-iconic-view`.

The part that carries the face is the main mass. Grow that part in place until the `head` ellipse, plus one eye width of margin, sits on calm solid fill. Size it for the widest mood, since happy eyes are nearly twice as wide as idle ones. A block added to hold the face, or eyes shrunk to fit, is `avatar-face-part-leads`.

Size every other part by its outline, enclosed space included, not by its fill. It stays clearly smaller than the face part and reaches out only as far as recognition needs. A handle loop as tall as its cup is `avatar-size-by-outline`.

Keep the few steps that name the object, such as a neck, a lid or a lip, and drop every other detail. Build the shape from one to seven soft primitives that overlap into one outline.

Every join is a clear step or a smooth flow. A step is at least half an eye width, and a flow runs one edge straight on with the inner corners buried. A part joined at two points stays joined at both. Edges that nearly line up and leave a sliver or a notch are `avatar-clean-joins`.

Cut a hole only for a real opening, such as a mug handle or a ring, and wind it against its outline so the fill leaves it open. A slot, a button or a decorative cut-out is `avatar-holes-are-openings`.

Keep toy proportions. No part is thinner than an eye is wide, every corner is rounded and every taper ends in a soft tip. An organic part, like a leaf or a flame, keeps its curve and direction. A hairline, a sharp point or a leaf flattened into an oval is `avatar-toy-proportions`.

Centre the mass and sit it on a flat or gently rounded base. Then look at the whole shape at 28px, at rest and mid-lean. If it reads as another object or a broken one, rebalance the parts or change the view, even when every rule above holds.

Colour comes from two variables, `--avatar-body` and `--avatar-eyes`, checked in both themes. A fill written into the path is `avatar-colour-variables`.

3. Put the eyes on a sphere

Two white capsules, each about 2.2 times as tall as wide, rest high and to the right. They lean like a backslash, with the head tilted about 12°.

The eyes sit on a sphere behind the face. A yaw, pitch and roll place them, so they narrow near the edge and fade as they turn behind. Eyes sliding flat across the face is `avatar-eyes-on-a-sphere`. `drawEyes` in `face.js` does the projection.

Clip both eyes to the silhouette path, inside the group that moves the body. An eye drawn past the outline is `avatar-clip-to-the-body`.

4. Give the whole body life

Nothing holds still. The gaze drifts on layered sine waves and glances to a new spot every 1.5–4s, and big glances bring a blink. A gaze parked at rest between events is `avatar-never-still`.

Blinks take 180ms and close in the first 45% of it. They land 1.9–4.6s apart, and 18% are doubles. A blink on a fixed interval is `avatar-irregular-blinks`.

The body breathes 1.2% on a 3.4s cycle, floats slightly and leans toward its gaze a beat late. Eyes settle in about 60ms and the body in 220ms. Eyes moving inside a frozen body is `avatar-whole-body`.

5. Make moods from eye shapes

A mood is one row of numbers: eye width, height, tilt, spacing, openness and a gaze offset. Moods blend over about 90ms on an exponential ease-out and never overshoot. A separate drawing swapped in per mood is `avatar-moods-as-numbers`.

Start from idle, attentive, excited, happy, sleepy and asleep. Add one or two moves only this object can make, such as a lid that lags behind a hop. A character with no move of its own is `avatar-object-move`.

6. Wire the reactions

Each reaction answers one input from the page:

• The pointer enters after 6s away. The eyes spin 360° round the back over 1.1s, then follow the pointer.
• The pointer rests on the primary action. The eyes widen and the body bounces slightly.
• The user presses the action or the character. It hops for 750ms with squash and stretch, then squints hap