How the
cloth thinks.

An archive you can alter

The site treats the Jacquard loom as more than a precursor metaphor. It is a working idea: a binary surface controls a physical-looking result. The visitor begins among workshop materials—oak, manila stock, indigo yarn, faded ivory—and arrives at an instrument that responds. Clicking a hole changes the lifted warp for future picks, while already woven rows remain intact. That persistence matters. The cloth becomes a timeline of decisions rather than a decorative animation.

The editorial sections widen that tactile encounter into an argument: information first became portable through matter. The page moves from live machine, to enlarged mechanism, to historical essay, pattern cabinet, and lineage. Asymmetry and folio markings make it feel catalogued, handled, and slightly unruly.

The moving parts

1. 01PunchtoggleHole()
2. 02ReadaddPick()
3. 03CrossdrawShuttle()
4. 04RememberwovenRows

Live weaving canvas

In main.js, makePattern() generates three 8-by-12 Boolean drafts. addPick() copies the current card row into wovenRows; copying is why old cloth survives later edits. startLoop() advances at the range control’s picks-per-minute value, while stopLoop() cancels the animation frame when the page is hidden or paused. draw() scales for device pixel ratio, lays down 36 ivory warp threads, then calls threadPath() for every stored weft row. Tiny vertical offsets create the over-under illusion. drawShuttle() moves shaded oak across the active shed.

Punch-card editor

buildGrid() creates 96 labelled buttons and a roving keyboard focus. Arrow keys move through the matrix; Enter or Space punches. A click runs toggleHole(), moves the reader to that row, and commits an immediate pick, so cause and effect never disappears behind an 8-row wait. fireDecisionSignal() draws a temporary SVG thread from that exact hole to its warp column, while ejectChad() releases a tiny CSS paper disc. The adjacent 12-bit tape exposes exactly what the loom reads. Presets replace the matrix with different binary arrangements, and every cabinet swatch is a working shortcut back to the editor.

Woven atmosphere

styles.css builds imagery from layered gradients, borders, shadows, and an inline SVG noise field. Repeating linear and conic gradients form cloth; pseudo-elements add selvedges, paper grain, and read-head light. The mechanism diagram uses plain elements for needles and hooks. Under reduced motion, staggered entrances collapse and the canvas renders a complete static cloth that still responds to edits.

Colour & type ledger

Zilla Slab carries headlines, essay text, and the human voice. Its compact forms feel printed without becoming nostalgic costume. Space Mono labels cards, controls, dates, and machine data. The contrast separates interpretation from instruction.

Prompt the same ambition

Ask an AI agent to design an editorial digital workshop about a historical machine, then require one authentic input-to-output relationship—not a cosmetic demo. Specify a dominant material palette, two self-hosted type roles, and imagery made only from canvas or CSS. Request that user decisions persist visibly in the output, that the story explains the mechanism before claiming its legacy, and that mobile simplifies composition without shrinking the idea. Finally, require screenshot review at phone, tablet, and desktop widths; the atmosphere should survive all three.