How the sheet comes about
A sheet of rolled heads, sixty frames a second, every line drawn by hand and none of them twice the same. These docs show what that is built out of.
A seed is a person: the same number always yields the same face. Every frame is still drawn anew, because the heads do not stand still – they turn towards the pointer, the pupils travel along, they blink and breathe. Almost everything described here follows from those two sentences: everything must be deterministic, and everything must be recomputable within a few milliseconds.
Apart from Vite, TypeScript and Vitest the project has not a single dependency. No drawing library, no state manager, no animation framework – the geometry, the randomness, the pen and the spring arithmetic all live in this house. That is not an end in itself: each of these pieces makes a decision a general library could not make.
Three things that stay apart
The whole architecture hangs on a single distinction, and anyone who has seen it once can find their way around everywhere:
| DNA |
Who the head is. Skull measurements, rest pose,
feature choice, colour genes – all out of one seed, all
style-neutral. core/dna.ts
|
|---|---|
| Motion |
What it is doing right now. Rotation, pupil
direction, blink, attention, mouth opening. Pure computation with
no DOM and no canvas. app/blick.ts
|
| Style |
How both of them look. The style does not compute
the animation itself; otherwise every further style would have to
invent it again. styles/klar/
|
The seed is the address of a face. That makes the order in which the DNA draws its random numbers part of the contract: a new field is appended, never inserted. Break that and you change every existing face at once.
The chain
From the number to the sheet the way leads through a series of stations; the small tag above each chapter says which one. The order below is also the recommended reading order.
If time is short
Three chapters carry the rest. If you read only one, take Point cloud: that is where it says why the whole thing runs smoothly at all. If you want to know why it looks drawn and not rendered, read The pen. And if you want to touch the code without breaking anything, read Pitfalls – it collects what has already gone wrong once.
Where the idea comes from
The attitude and the starting point go back to a post by @mannay. The graphic direction of this second edition – calm line, almost white surface, rosy cheeks, names under the heads – comes from If we all had heads. The code is an independent implementation; thanks and authorship of the original ideas belong to the models.
The code itself is written in German – identifiers, comments and the source excerpts quoted throughout these pages. The excerpts are cut out of the real files at runtime, so translating them here would make them a quotation that drifts. Where a name matters, this text says what it means.