How this house was built

Architecture

Static files, no framework, no build step. Thirteen hand-written HTML pages, two stylesheets (style.css for the house, desk.css for the door only), two scripts (main.js: the twelve verbs; desk.js: the desk's six). The door is a DOM scene — fourteen absolutely-positioned objects over CSS-painted wood — because a DOM of named, linked figures with archival alt text is a catalogue, and view-source is part of the audience.

Backend: none, permanently. All state lives in one confessed localStorage key (pillowbook): visited rooms, dwell per room (the spine), object positions, the gift. A desk does not phone anyone when you touch it. The absence of a server is the privacy policy.

The asset pipeline (there are almost no assets)

Every material is procedural: wood grain, paper fibre, foxing and dust are SVG feTurbulence fields inlined as data URIs — about 1 KB of noise mathematics for the entire material system. Deckled paper edges are clip-path polygons; letterpress is paired text-shadows agreeing with the lamp; the hand-drawn wobble of the floor plan is a turbulence displacement filter over the strokes. Zero image requests on the door.

When real scans arrive (the evidence ledger's capture protocol), the pipeline is: flatbed or phone-overhead → crop honest, keep flaws → Squoosh to AVIF/WebP at ≤45 KB per object → <picture> with width/height set. Until then, missing objects wear conservator's slips — never stand-ins.

Typography

One download, chosen by a written rule: the world bible allowed a single typeface only if identity demanded it and only from Fontshare — the Indian Type Foundry, Ahmedabad, the same country as the room. Sentient (Regular, Italic, Medium — 78 KB total, font-display: swap) gives every visitor's machine the same pen-informed voice; the system old-style stack remains the honest fallback. The mono voice stays the machine's own ui-monospace: a downloaded typewriter face is costume. Display type: none — headlines are the same pen writing larger.

Tools used

Hand-written HTML/CSS/JS · SVG turbulence for matter · the Web Animations model via plain CSS keyframes (~1.5 KB of motion, all of it material law) · headless Chrome as the verification camera (every change is screenshotted at 1440 and 500 wide, both hours, before it ships) · Fontshare for the one typeface · Cloudflare Pages for hosting · axe DevTools and VoiceOver as the accessibility gate.

Tools refused, with reasons

This section is the design system.

GSAP — refused. Its entry condition is written down: only if a material law exceeds hand keyframes. None does; free easing curves breed decorative motion. Spline / WebGL — refused; a modeled desk reads as a video game, dies with its toolchain, and costs 50–200 KB against a 200 ms budget. Depth here is state, light and shadow. Generated "photoreal" textures and imagery — refused on law: this site's one promise is no believable fakes; matter may be mathematics, but evidence must be testimony. Icon sets (Lucide) — unused; a century of proofreader's marks (stet, dele, the caret, the asterisk) already covers every symbolic need. Illustration libraries (unDraw) — banned; one startup-flat figure would end the fiction. Frameworks, bundlers, analytics — see §1; the absence is load-bearing.

Interaction constitution (short form)

Twelve verbs on one state vector (docs/verb-grammar.md): open, stay, hold, unfold, turn, flip, disagree, correct, take, stray, return, forget. Invariants: no verb moves the scroll; nothing moves unless a hand moves it (single exception: ink drying on arrival — the owner's touch precedes the reader's); no state leaves the browser; silence is the room tone. Timing constants: 150 ms thresholds, 200 ms folds, 640 ms arrivals, 2 s ink-dry, ∞ reading. The portability rule deleted four finished features: if an interaction could exist unchanged on another portfolio, it was discarded.

Deploy

Cloudflare Pages, static. From the project root: npx wrangler pages deploy src --project-name pillow-book (first run: npx wrangler login). _headers ships immutable caching for fonts and icons plus nosniff and a strict referrer policy; /guide resolves to this page automatically. No environment variables, no functions, no build command — the deploy is a copy.

Critique log

Pass one — matter. First textures shipped too loud: foxing read as water damage, wood alpha crushed the lamp. Both retuned by thresholds, not opacity tricks. A pseudo-element law came out of a real collision: papers own ::before, dust owns ::after, sitewide.

Pass two — behaviour. Hover was starting drags from stale coordinates (pointermove fires without a press) and the browser's native link-drag was stealing gestures mid-slide. Both fixed; a repair routine now discards any remembered position parked at the clamp edges. The fan-tremble was cut by the owner's order: even one autonomous twitch reads as the room acting on its own.

Pass three — identity and honesty. Sentient installed under the written escape hatch; the colophon rewritten so it never claims "no fonts downloaded" again; weights restated truthfully; the arrival beat added (the lamp lights because you entered — once, ever, skipped under reduced motion); the plan's strokes given real ink displacement while its caption still confesses the hand is borrowed.

The sky amendment (12 jul 2026)

By the owner's order, the opening became the Atlas made real: the eleven rooms as constellations over the house, the desk demoted to the observatory table below (/desk). The motion law split cleanly along the mythology: on the desk, nothing moves without a hand; in the sky, everything moves by gravity. Constellations and paper satellites drift on soft springs around charted homes; the visitor's pointer is a small mass that attracts nearby paper; star twinkle runs at ~15 fps because a sky is not a game. The whole physics is ~2 KB of hand-written integration — GSAP, Spline and generated imagery were re-evaluated for this scene and refused again for the same reasons as §5. Memory became magnitude: visited rooms burn brighter, and the room you stayed in longest is the brightest star in the sky. Under reduced motion the heavens are honestly still; with JavaScript off, the chart is a fixed map and every constellation remains a link.