Brand engine · Faces
Faces
Inside the knocked-out void, a mark can hold an expression. Twenty-six of them, drawn on a 9×9 sub-grid and morphed between on a 2.9-second slot with a short transition, so a face never cuts, it always travels.
The rule
A face needs room and it needs time. So it appears at hero scale and nowhere else: the header and footer marks are the same engine held still with no face at all, because an expression at 26px is noise, and a mark you look at for a second cannot say anything with a 2.9-second slot.
The set comes from Circleheads, a studio of people, and akaBuild runs the same head through the same twenty-six expressions. It used to cycle disciplines instead. Naming the work was the weaker version of the point: range reads better as one face changing than as a list.
In motion
The cycle
With faces, the expression changes during the assembled hold, so the mark is never static but never busy either. Blinks fire on their own schedule, independent of the expression slot.
The loop's order is reform, hold, dissolve, and a face is only drawn once the disc is whole. So a mark opens on 1.7 seconds of scattered pixels and then the first face appears at once, which reads as loading when the mark is the first thing on a page. startAssembled starts the clock at the top of the hold instead. Only that first assemble is skipped; every later loop still dissolves.
faces
<PixelHead grid={24} faces fluid />
faces + startAssembled
<PixelHead grid={24} faces startAssembled fluid />
The set
Twenty-six expressions
Every slot, held still via faceIndex. The range runs from neutral through curious, skeptical, delighted, and asleep: enough personality to feel alive across a long hold, never so much that it reads as a cartoon.
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<PixelHead faceIndex={7} size={62} grid={20} still />
Personas
Named expressions
Two slots are named, because they carry meaning rather than mood: they stand in for people and states across the studio sites. Named faces are stable API; raw indices are not.
<PixelHead face="wink" size={120} grid={22} still />
Entrance
Assemble once, then hold
For marks that should announce themselves and then get out of the way: once assembles on first view and stops. shimmer adds a ~3Hz twinkle on ~4% of cells, enough to keep it alive in peripheral vision without asking for attention.
Under it
How a face is drawn
- 9×9 sub-grid. Each expression is a small bitmap of eye, brow, and mouth cells, parsed once at module load, not per frame.
- 2.9s slot, short morph. Expressions hold, then interpolate into the next over a fixed transition window. Nothing cuts.
- Independent blinks. Blink timing runs on its own clock, so the same expression never looks looped.
- Optional accent. A slot can carry one accent colour cell: the only place colour enters a mark.
- Reduced motion. The whole timeline collapses to a single representative frame.
Back to marks for the disc family, dissolve modes, and the full prop reference, or akaSTYLE for the design language itself.