An assistant with a face

Halo

One small engine that gives an app's assistant a face: eight states, each with its own colour and motion, from 16 to 256 px, alive at rest.

  • Move your pointer. His eyes overshoot and settle, his head follows, and the halo swings a beat later.
  • Come close. He notices you.
  • Click him. Boop.
  • Leave him alone. He looks around, tilts his head and blinks twice.

Eight states, each its own

Colour means something and motion shows it. The screen carries a small instrument for each state, and trouble is always calm: red never flashes or shakes.

Five looks, one engine

Every look shares the states, timing and colours. Machined is the one that ships.

Every size

Detail drops away as he shrinks; the eyes never do. Below 22 px every look draws the same clean icon.

Under the hood

SVG + CSS, about 7 KBNo runtime and no canvas. Colours are CSS variables, so it themes with the app.
Springs and idle lifeThe eyes, head and halo move on springs with fixed 4 ms steps, so motion feels the same at 30 or 120 fps.
Kind to devicesOff-screen faces pause, and reduced motion holds every state as a still frame that still reads.