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
Faces belong to Circleheads — a studio of people, so its mark has a face. akaBuild's mark cycles disciplines instead, because the work is the subject, not the person. One engine, two philosophies — and the decision of which to use is a brand decision, not a technical one.
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.
<PixelHead size={400} grid={24} faces 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.