Brand engine · Marks
Marks
One canvas engine, every mark in the family. A disc of pixel cells with something subtracted from it — change what is subtracted and you change brands, not code. Every mark on this page is live: colour follows --foreground, loops pause offscreen, and reduced motion renders a single frame.
The akaBuild mark
A disc with aka inside
The primary identity: a solid disc with the lowercase wordmark knocked out of it. The glyph is sampled in normalized space rather than baked to a fixed grid, so the same mark resolves at any resolution — chrome, favicon, or hero.
<PixelHead icon="disc-aka" size={160} grid={32} still />
The family
Same grammar, different subtraction
Each studio and product gets its own knockout. That is the entire brand system — the engine, the ground, and one shape removed.
akaBuild
wordmark void
Circleheads
figure void
akaOSS
sparkle void
Games
work line
Variant
Negative and figure
The default is negative — a filled disc with the shape cut out. Figure inverts it: the shape is drawn, wrapped in a thin ring. Negative reads better small; figure reads better when the shape itself is the message.
Wordmarks
Mask-drawn lettering
For titles whose mark is text, the glyph is drawn directly instead of subtracted — a hand-authored bitmap on the same cell grid, so lettering sits in the identical pixel rhythm as the discs.
<PixelHead icon="aka" size={30} grid={14} gap={0.12} still /> // site header
Motion
Four dissolve modes
The mark decays and reforms on a loop. The mode sets the order cells leave: by row, by radius, at random, or in glitch blocks. All four move cells through space — none of them fade opacity, per the motion rule.
mode = ash
mode = explode
mode = scatter
mode = glitch
Resolution
Grid and gap
grid sets cells across; gap sets the gutter as a fraction of a cell. Lower grid reads bolder at small sizes; higher grid carries finer knockouts.
Derived engine
AkaMark — the discipline cycler
The hero variant. Same disc grammar, but each reform reveals a different discipline rather than a face: AI spark, code brackets, an eighth note, an isometric cube, a terminal prompt, a pen stroke. The dissolve is the discipline change.
<AkaMark size={400} grid={24} hold={3.4} fluid />
Derived engine
PixelRoundabout — a simulation as a mark
The furthest the grammar stretches: Bartel-Pritchard Square rendered in the same bit style, driven by a real traffic simulation. Queueing, merge-yielding, and stop-and-go waves emerge from two rules. The sim is pure and DOM-free — the component owns the clock, so the same model could drive an SVG or a test.
<PixelRoundabout size={360} />
Reference
Props
| prop | type | what it does |
|---|---|---|
| size | number | Canvas CSS px. Required. |
| grid | number | Cells across. 14 for chrome, 22–32 for display. |
| icon | disc-aka | head | spark | bubble | gamepad | aka | nyz | pogo | What is subtracted, or which wordmark is drawn. |
| variant | negative | figure | Disc-with-void, or drawn shape in a ring. |
| mode | ash | explode | scatter | glitch | Dissolve order. |
| gap | number | Gutter as a fraction of a cell. |
| faces | boolean | Cycle expressions inside the void while assembled. |
| face | wink | thinking | Hold one expression — persona marks. |
| still | boolean | One assembled frame, never animates. Logo use. |
| once | boolean | Assemble on first view, then hold. |
| shimmer | boolean | With once: a quiet ~3Hz twinkle on ~4% of cells. |
| fluid | boolean | Scale down with the container, capped at size. |
| color | string | Override the pixel colour. Defaults to --foreground. |
| speed | number | Loop rate multiplier. |
Next: the face set — twenty-six expressions that live inside the void, and the rules for when a mark is allowed to have one.