Coworker Cast · back to the gallery
Three statuses, told apart by how they move rather than by a word beside them. Working scans and turns; needs-you hops and looks straight at you; idle holds still. Dial it to taste and copy the setting — it is three values and one attribute.
Every number below moves with the knobs above
Twelve coworkers, all working, rings forced on. Each one holds a fixed slot in the cycle derived from its name, so they never move in unison — and because the slot is a fraction rather than a number of seconds, that stays true at any rate.
No status text on any row — the ring and the motion carry it. Screen readers get a hidden label.
Reduced motion, a screenshot, a print, the first paint. Shown with rings forced on: they differ in form — dashed, solid, absent — not only in colour. With rings off, nothing visual is left here, so keep a hidden label on each row either way.
The one thing the kit can't infer — where the avatar sits on your screen
An avatar in a left rail should look right, toward the content. One above a button should look down at it. So --av-gaze-x and --av-gaze-y are per-instance, −1 to 1.
Gaze rides on the translate property while the status animations drive transform. They are separate properties, so they compose — no extra group, no JavaScript.
Default is centred: looking out at you.