Icon cell
A 12px glyph in a round cell of grain: every compact control on the site.
Point at it, tab to it, press it, click to switch it on
States
-
Rest
nothing set
A ring of tissue grain round clean paper, so the glyph reads even over a dithered print.
-
Hot
hover or :focus-visible
Fills --state, fires once, then its edge wobbles for as long as it stays hot.
-
Pressed
pointerdown
Shrinks a dot.
-
Switched on
aria-pressed, aria-expanded
An ink fill that breathes, at a third of the hover pace.
-
Selected
aria-selected, aria-current
A still ink fill. It marks a place, not a choice in progress.
-
Disabled
disabled
The ring at half strength, the glyph muted.
On an ink field
-
Rest
on the field
The ring prints in the field’s text colour.
-
Hot
hover or focus
The same --state fill and firing.
-
Open
aria-expanded
On ink the switched-on fill is --state: the open menu.
Anatomy
| Size | 32px (--control-sm); 40px with --lg |
|---|---|
| Glyph | 12px, from the 1-bit pixel set; a platform’s own mark at 16px |
| Dot | 2px, thresholded through the 8×8 Bayer screen |
| Ring at rest | 1.4 dots of --tissue at 60% |
| Fire | 280ms flare, once, on entry (--duration-fire) |
| Hot | two drifting harmonics, about a dot either way, redrawn at ~30fps |
| Switched on | one slow harmonic, redrawn at ~15fps |
| At rest | no frames drawn |
| Reduced motion | every state lands at once, as a still fill; nothing fires |
Timings are read from the engine at build time (rule.ts, ui.ts), not typed in here.
Decisions
-
Fires once
A repeat flare every 900ms was tried and dropped: the firing is the answer to arriving, and repeating it read as the control asking for attention.
-
Alive while hot
A hot cell that fired once and then sat as a still red disc read as switched off. It now moves in the culture’s language, a body breathing, rather than nudging the glyph.
-
Calm when on
An open menu sat as a still disc once focus moved into the menu. At the hover pace it looked permanently hovered, so it breathes at a third of it.
-
One interaction, one flare
Where a rule starts at a cell (a contact row, a link-out heading), the cell fires and the rule only develops out of it. Labelled controls used to fire twice.
-
Official marks
A pixel tracing of a platform’s logo read as a generic critter, so third-party marks keep their own drawing at 16px.
-
Replaced
A 32px ink box. The hero speaks tissue; a box beside it spoke cards.