The face in the margin: a character instead of a spinner

Every loading spinner is a small confession: something is happening and we have no idea how to talk to you about it. The bar fills, the dots pulse, the beach ball spins. Machinery noises from software that has run out of words.

Margin's intelligence deserved better than machinery noises. If the Mind reads your boards, follows your life, and works for you in the background, then the moment it's thinking should look like thinking rather than buffering.

So we gave it a face.

The craft we stole from#

The animated product marks people actually love, the small handful of them, obey the same quiet rules, and the rules are the opposite of what you'd guess.

What the loved ones share

Few features

the beloved ones are two or three strokes. Minimal geometry keeps a mark crisp at sixteen pixels and reads as a character instead of a cartoon. Anything more detailed becomes a mascot, and mascots age like milk.

Timing over drawing

a blink on a perfectly regular loop reads as a machine. A blink that comes a beat early, then a beat late, reads as alive. It's the old cel-animation lesson: character is when, not what.

Expression as status

the best marks don't accompany the loading state, they are it. Eyebrows that fidget where a spinner would go, a feature that falls apart and puts itself back together where an error toast would go.

Restraint

the line between beloved and insufferable is drawn at no bouncing, no gradients, no following your cursor around like an eager intern. A face you'll see ten thousand times has to be calm.

That last one is the whole ballgame. Most marks die of enthusiasm.

Drawing Margin#

Margin's whole visual language is marginalia, ink annotations living at the edge of a page. So the face nearly drew itself: two ink-dot eyes, two brow strokes. Then the part that makes it ours.

Where another mark would put a nose or a mouth, Margin's face sits above a short horizontal rule, the annotation line a reader draws in a margin. It looks like nothing. It's the entire character.

Four moods

Thinking

the brows waggle out of phase and the rule sways gently, like a thought being weighed.

Working

the eyes narrow into focus and the rule writes itself, over and over, left to right, because ink being drawn is literally what work is here.

Done

the eyes flash into happy arcs and the rule settles with a tiny overshoot, a full stop placed with satisfaction.

Stuck

because the assistant now admits when it's stuck, the brows knit, the eyes flatten, and the rule breaks in two, then redraws itself.

At rest it simply is, blinking on two mismatched clocks whose rhythms almost never align, glancing sideways once in a long while, so no two minutes of idleness ever quite repeat. Focus the input and it goes still and lifts its brows, because in a face, as in a person, attention is stillness.

The rules under the rules#

The face is a few strokes of ink that inherit whatever theme you're in. Ask your device for reduced motion and it complies fully: the poses hold, nothing moves, and the expression still tells you everything.

Nobody has to be taught that knitted brows mean trouble. People have been reading status off faces for a very long time.

There's one law the face answers to before any of that, and it's the one we'll defend hardest. The face never appears beside a spinner. It doesn't decorate the loading state, it replaces it. The day a progress bar shows up next to it is the day the character dies.

What changed since#

This was written in July, and the face kept moving. The horizontal rule is gone: the drawing that ships today, called Jot, has two dot eyes, tapered ink brows and a small comma nose, and still no mouth. It picked up two more moods, searching and revising, because reading your notes and rewriting a reply were showing up as the wrong expression. It also got company. You can pick a different character in Appearance settings, and every one of them follows the same law.

The motion moved off pure CSS onto one shared animation clock that pauses when the tab is hidden, so the phone app can run the exact same performance instead of a copy of it.