The case file on the Dead Letter Office

Item one. The assignment

Build a playable narrative: the visitor is the night clerk of a dead letter office in February 1954. A shift is three pieces of undeliverable mail. Each is opened and read, and each takes one of three dispositions: return to sender, burn, or deliver anyway, against regulation. Choices set flags; the office notices; a full shift ends in one of four clock-out posters. Everything is staged in print, paper, and lamplight. The letters have to be worth the reading, or none of the machinery matters.

Item two. The machine

The engine is a hand-rolled scene graph in two small files. Every scene is a template function of the shift's state; every choice writes a flag and re-enters the graph. A few doors are routed at walk-through time, so the same button can open onto different rooms depending on the night. This is the router, verbatim:

/* Routed targets: a few doors open onto different rooms depending on the night. */
function resolve(id) {
  if (id === '@afterthree') return showFourth(S) ? 'e4' : 'clockout';
  if (id === '@resume') return S.scene === 'hero' ? 'intro' : S.scene;
  if (id === '@punchout') {
    S.ending = computeEnding(S);
    S.done = true;
    S.record.push(S.ending);
    return 'ending';
  }
  if (id === '@newshift') { S = freshState(S.shift + 1, S.record); return 'intro'; }
  return SCENES[id] ? id : null;
}

FROM js/engine.js · THE ROUTER

A decision is one write. The desk accumulates a physical trace of each kind of choice, which the ending poster later reads back as "the desk, as you leave it."

const DESK_BY_FATE = { return: 'stamp', burn: 'ash', deliver: 'pencil' };

function decide(item, fate) {
  if (busy || S.fates[item]) return;
  S.fates[item] = fate;
  if (item !== 'e4' && !S.desk.includes(DESK_BY_FATE[fate])) S.desk.push(DESK_BY_FATE[fate]);
  save();
  go(item + '-after');
}

FROM js/engine.js · A CHOICE IS A WRITE

Endings collapse twenty-seven possible shifts into four rooms, and the hidden fourth envelope opens only for certain clerks. The whole moral bookkeeping of the piece is nine lines:

function computeEnding(S) {
  if (fateCount(S, 'burn') >= 2) return 'ash';
  if (fateCount(S, 'deliver') >= 2) return 'route';
  if (fateCount(S, 'return') >= 2) return 'back';
  return 'scale';
}

function showFourth(S) {
  return fateCount(S, 'deliver') >= 1 || fateCount(S, 'burn') === 3 || S.shift >= 2;
}

FROM js/story.js · FOUR ROOMS, ONE DRAWER

The office noticing you is also just state. The supervisor's notes are keyed to each fate, stage directions inhale the pattern of your choices, and the log line after a delivery is typed RETURNED with a pencil correction underneath, because Pell covers for her clerks. Shifts persist in localStorage; clock out and the record survives you.

Item three. The map

One shift, drawn as the mail sees it. Every item passes the same three stations; the desk keeps the pattern; the pattern picks the door you leave by.

Item four. The voices

Typography does all the acting. Four voices, never mixed:

Item five. The evidence

All four photographs are AI-generated imagery, produced with Fal (Nano Banana Pro) for this exhibit and staged in-world as evidence photographs. Nothing depicted exists. The source pigeonhole photograph contains a dim digital clock, an anachronism for 1954; the exhibit buries that band under the hero's lamplight scrim and crops it out of the ending art. Everything else on the site, every stamp, postmark, packet, and paper, is drawn in CSS and SVG.

Item six. What the passes caught

• PASS ONE · THE COLLAPSE Auto-margin centering inside a grid scene collapsed every block to fit-content: the airmail envelope computed at zero size and wore its own stamps as a pile. A full-width inner track restored the geometry. Also caught: postmark arc text clipped at the SVG edge, the kicker splitting "NINE HUNDRED," and the ending art leaking the source photo's digital clock. Upgrade shipped: reactive room weather, where stage directions inhale the pattern of prior choices.
• PASS TWO · THE INVISIBLE NOTE The supervisor's final note inherited cream text on its own cream card and vanished; the seed packet stretched to twice its height because percentage padding on a flex item resolves against the container; the charred scrap faded to a pale ghost instead of blackening; mobile airmail markings crossed the address. All fixed in the pass. Upgrade shipped: the desk rail, a typed inventory chip that accumulates the night's objects.
• PASS THREE · THE RECORD Final sweep at both viewports: dateline orphans joined, manifest lines de-duplicated against their fate labels, caption strips hardened against photo edges, this case file written in the exhibit's own language and shot like any other scene. Upgrade shipped: the record of shifts, a cross-shift memory the poster reads back after a second clock-out.

Item seven. Colophon

Static HTML, CSS, and hand-rolled JavaScript. No framework, no build step. State lives in localStorage under one key. Landmarks and one heading of the first rank per page; scene changes are announced politely to screen readers; every choice is a real button; motion runs on custom cubic-bezier curves, compositor properties only, and stands down entirely under prefers-reduced-motion. Fictional bureau, fictional towns, fictional dead. The letters are original writing for this exhibit.