01 · Concept
Two verbs, treated as a world.
The Lace School is a working textile room rather than a museum label. Its visual and historical argument is that astonishing complexity can grow from tiny repeated choices. A pale linen field gives way to a dark demonstration chamber, then pricking-card blue, cabinet wood and a single silk-ribbon rose. The changing sequence feels like moving between stations in an old school.
The composition borrows from a lace pillow: circular pressure, taut diagonals and objects that sit slightly outside a rational grid. Editorial scale and unusually low line-height make the headings feel embroidered rather than typeset. The rose color appears sparingly, so it behaves like a silk worker thread — the one strand the eye can always follow.
02 · Visual & interaction techniques
The mechanism under the linen.
scheduleFrame() in main.js starts a two-state cycle only while the page is visible and the hands are running. renderFrame() exchanges the inner bobbins for CROSS and turns both pairs outward for TWIST. Persistent SVG nodes change only their paths and transforms, avoiding per-frame reconstruction. drawPattern() swaps torchon, spider and rose pin fields, while the row counter exposes deeper routes.
The pillow and bobbins use SVG radial and linear gradients, restrained shadows and layered parts. Thread paths alternate ecru values to keep their crossings legible. Each brass pin combines shaft, head and puncture; a fixed viewBox keeps the apparatus sharp. CSS linen grain, seam rings and oblique ruled fields build material depth without image requests.
The CROSS and TWIST studies are also keyboard-operable composition controls. renderMemory() converts up to eight free choices into paired cubic SVG paths, pins every decision and reveals a final maker’s seal. The separate six-move exercise stores expected pairs in practiceSteps; a wrong pair draws a temporary rose path that visibly unravels without erasing correct work.
The opening uses one staggered reveal and a separately drawn hero thread. Hover movement belongs to mechanisms—the move diagrams and hanging bobbins—not generic containers. prefers-reduced-motion resolves the apparatus to a stable frame. Pausing cancels its animation frame; visibilitychange does the same when the document is hidden, then schedules exactly one clean restart.
03 · Palette & type tokens
A quiet field, one bright thread.
Cormorant Garamond carries display headings, quotations and the essay, mostly in weights 300–600 with compressed tracking. Epilogue handles controls, labels and body navigation in compact uppercase settings. Both families are self-hosted from the shared font library.
Two movements, infinitely inflected.CTEpilogue
PAIR B · MOVE 04 · TENSION 67%
04 · Reproduce this
Prompt the principle, not the surface.
Ask an AI agent to build a responsive, image-free editorial experience around a craft with a tiny generative grammar. Specify one dominant material field, one archival diagram color and one scarce accent thread. Require a working SVG simulation that enacts the craft’s core operations, plus a forgiving guided exercise with meaningful recovery. Name the type families, demand original historical content, insist that every visual is code, and review screenshots at phone, tablet and desktop widths. Add keyboard operation, reduced-motion behavior and a loop that sleeps when hidden. The essential phrase is: make the interaction prove the essay’s thesis.