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 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.