Naar inhoud

The making of

How this site was made.

Loomstate is a Weblify showcase built on the Spoor S signature track: a live generative loom whose cloth is woven from a binary draft you can edit, drawn entirely from code, with zero image bytes.

01

The idea

LOOMSTATE argues one thing: cloth is the oldest binary code. At every crossing the warp is either raised or lowered, one or zero, and the Jacquard punch card that ran the loom in 1804 is the direct ancestor of the punch card that ran the census, the tape, the stored program, this screen.

Because a loom needs no pictures, the site ships zero image bytes. There are no photographs, no generated art, no icon sprites, no data-URI textures. Every mark you see, the cloth, the punch card, the wordmark, the diagrams, is drawn from code the instant you ask for it. The asceticism is the argument, not a limitation we tolerated.

02

The weave engine

The cloth is a genuine drawdown. A binary draft matrix decides each intersection: one means the warp shows, zero means the weft crosses over. Structure presets are the real float equations, plain (row + col) mod 2, twill 2/2 ((col - row) mod 4) < 2, and eight-end satin ((col - row times three) mod 8) equals zero. Typing a word encodes each letter into eight bits, one card row, which is exactly how a Jacquard loom would read your name.

The complete cloth is painted once to an offscreen canvas buffer, with a one-pixel bevel per cell so the floats read as woven relief. Scrolling only blits a slice of that buffer up to the current pick, plus a madder beater line at the fell, so the weave stays at sixty frames a second with no library and no dependency.

03

Motion, kept honest

On a wide screen the loom pins itself and weaves row by row as you scroll. On a phone it weaves in once when it enters view, then stays complete and editable. With reduced motion switched on, the finished cloth renders immediately, no build, no loops, and every control still works. Motion is a parallel design, never a gate in front of the content.

04

Accessible by construction

The punch card is not a picture of a grid, it is sixty-four real buttons in a labelled group, each with a pressed state, arrow-key navigation and space to toggle. The structure presets are labelled toggles and the word field has a real label. The canvas is marked decorative because the punch card and a live status line carry the same information to a screen reader. Contrast was computed for every text pairing, not eyeballed.

05

The stack

Astro and Tailwind, self-hosted Zilla Slab and IBM Plex Mono, a strict meta hash content-security-policy with no inline styles or handlers, and one small hand-written module for the loom. Built and deployed on Cloudflare. Nothing renders that a browser cannot draw itself.