A feeling, not a look
The small figures on claude.com's product pages stayed with me: a sprout that grows, a toolbox that opens, two speech bubbles that overlap. They are drawn like someone sketched them in a notebook, and when you hover one, it moves just enough to feel alive.
I did not want those figures. I wanted to know why they feel the way they do, so I could make my own on purpose, about my own ideas.
Taking them apart
Before drawing anything, I had Claude open the page and take the figures apart: what the files are, how the frames are stored, how they play.
That list became the engine's first draft, and most of it is still there. None of their files are in mimo; every figure here is drawn from scratch.
Borrowing a shape
The other half came from hairline, a skill that draws isometric line figures. Its insight is about structure, not style: keep the engine fixed and let the agent write only the figure, hold every figure to written rules, and make the agent look at its work before handing it over.
mimo keeps that shape. The agent writes one small file; a validator checks what is mechanical; a contact sheet of every pose shows it what a stranger would see.
The first ten
The first real test was my own portfolio: ten figures, one for each kind of section. Five agents drew two each, in parallel, each looping through the contact sheet until its figures held up.
They looked right. They also felt laggy.
Pushback
My first guess was performance, so we measured instead of guessing. The page held 60 frames a second, even with every figure looping and the processor slowed six times. The engine was fine. The timing was the problem.
So the clock split in two. Motion is now drawn on every screen refresh, from real elapsed time; the hand-drawn wobble still changes shape eight times a second, and glides between shapes instead of snapping. A frame costs about 0.3 ms, so drawing every refresh is cheap.
Other corrections came the same way, each written down so it could not come back:
- A fresh agent, given only the skill, drew a lightbulb and reported every place the instructions made it guess. Its report became a rest-pose check in the validator, two new helpers and a strip of every frame on the contact sheet, after a flicker hid between the sampled poses.
- The hero figure took three rounds: a cluttered top, sparkles too small to see, and two seconds where nothing happened. Then, from me: the motor rollers looked too thick.
The hero
A rough sketch goes into a little machine, and a finished app comes out the other side. It is the most complex figure here: about forty-five parts, eight seconds, and the whole designer-and-developer pitch in one loop.
What I would keep
- Rules over taste. Every correction became a rule or a check, so the tenth figure is held to the same bar as the first.
- Let the agent see. The contact sheet caught more problems than any instruction prevented.
- Measure before fixing. The lag was never the processor.