# Arcade pixel

A word printed into a flat colour poster in hard pixel blocks, collapsing and resolving into the next word. Live at https://design.how/vault#pixel-threshold.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/pixel-threshold
```

## What it is

A hot red poster with one short word printed into it in hard pixel blocks: an italic near-black face, a white halo three blocks wide and a black keyline of the same width pushed one block down and right, so it shows as a block shadow. Every edge staircases on one lattice of 150 cells across. A printed surface lies over the whole poster, letters included: a moire interference plate in hard light, a fine grain in linear light and a dust plate in screen, then a speckle of a fringe colour along the halo's rim, a levels crush and a touch of vibrance.

The blocks come from real low resolution, not from thresholding a blur. The word is rasterised into a tiny canvas the size of the grid, thresholded to one bit, and the halo and keyline are dilated in whole cells on that same grid, so all three layers quantise in register. The three masks go up as the R, G and B channels of one texture, scaled with nearest neighbour, and the fragment shader paints ground, keyline, halo and face from them before laying the plates over the top.

The one piece of motion is the grid itself. The word holds for 1.9 s, then the cell count falls from 150 to 55 in 0.24 s, the word and colourway change at the coarsest frame where nothing is legible, and it resolves back to 150 over 0.38 s. The count is eased geometrically, equal ratios rather than equal steps, so each change in block size reads as an equal jump. Four phrases and six colourways rotate through.

The pointer moves the light. The block shadow swings away from it in whole cells, eased as a float and rounded only when the mask is rebuilt; the word leans about 1.6% of the frame toward it; and the moire is sampled a second time rotated by up to three degrees around the pointer and blended in, which slides the interference bands under the hand while the print stays put.

## How it works

- Rasterise the word at the grid's own resolution (cols across), threshold it to one bit, and dilate halo and keyline in whole cells on that grid; offset the keyline in cells for the shadow.
- Pack face, halo and keyline into R, G and B of one texture, upscaled with nearest neighbour, and rebuild it only when the quantised cell count, the shadow cell or the word changes.
- In one fragment shader over one triangle, paint ground, keyline, halo and face from the three channels, then lay the moire (hard light), grain (linear light) and dust (screen) plates over everything, each tiled as a square REPEAT texture.
- Finish with a levels crush (5 to 230) and a small vibrance lift.
- Run the cycle as hold, collapse, resolve, easing the cell count geometrically between 150 and 55, and change word and colourway at the bottom of the collapse.
- Ease the pointer's presence, swing the shadow away from it in whole cells, and rotate a second moire sample around it, blended rather than min-ed so the surface never darkens.
- Load the plates with crossOrigin set, and fall back to clamp if one is not a power of two.
- Cap the pixel ratio at 2, stop the loop on webglcontextlost, and on destroy delete the program, buffer and four textures and lose the context.
- Under reduced motion, draw the resting poster once in the first colourway.

## What you can change

- `SEQUENCE` (["pixel", "insert coin", "player one", "game over"]): The words the cycle rotates through.
- `COLORWAYS` (six {ground, ink, paper, fringe}): The poster colours. The first is the resting one.
- `DEFAULTS.threshold` (0.588): The luminance below which the ground's own shadows deepen, a mild burn under the print. The letterforms come from the grid, not from this.
- `FINE, COARSE` (150, 55): Cells across at rest and at the bottom of the collapse.
- `HOLD_MS, COLLAPSE_MS, RESOLVE_MS` (1900, 240, 380): How long each phase of the cycle runs.
- `DEFAULTS.halo, DEFAULTS.keyline` (3, 3): White halo and black keyline width, in cells.
- `DEFAULTS.keylineOffset` ([1, 1]): How far the keyline is pushed into a drop shadow, in cells.
- `DEFAULTS.texture` (0.25): Strength of the printed surface. 0 is a clean vector poster.
- `FONT_CSS, FONT_WEIGHT` (var(--visual-sans), 600): The face and weight. A thin stroke does not survive being quantised.

Last updated: 2026-11-02