Return to Station X

SX / DESIGN DOSSIER / FILE 110

Field
manual.

HOW THE NIGHTWAS BUILT
01 / Intent

The night is
under your hands.

Station X is a fictional museum room about codebreaking, secrecy, and consequence. The visitor does not simply read an intercept, but touches the machine, chooses a setting, and watches language emerge. Blackout timber, damp card, red pencil, bakelite, brass, and low tungsten light keep the work tactile. The convoy survives, but the page refuses a victory parade. It ends with ordinary lives and thirty years of silence.

02 / Moving Frame

An establishing shot,
not a banner.

The hero stages /assets/gen/stationx/hero.jpg as a film frame. In styles.css, cameraDrift supplies an optical push while smokeDrift moves two blurred layers at different speeds. Sepia, asymmetric scrims, letterbox bars, reel metadata, ciphertext, grain, and a narrow flare turn the still into a night interior. Movement uses transforms and opacity; reduced motion freezes a composed poster.

GRAINTYPESMOKESCRIMPOSTER / HERO.JPG
03 / Local Film Pipeline

Made as cinema.
Kept local.

The key frame was generated with GPT Image 2 through Higgsfield, then prepared for a five-second Kling 3.0 ambient loop. Both belong in /assets/gen/stationx/, so the experience makes no external request. Because loop.mp4 is absent in this edition, the hero honestly falls back to the matching still and code-driven camera, smoke, flare, and grain motion. Every other visual remains generated in HTML, CSS, SVG, or canvas.

GPT IMAGE 2hero.jpgKLING 3.0loop.mp4LOCAL FRAMEposter fallback
04 / Machine Logic

The answer must
be earned.

Three accessible spinbuttons begin one position from the day key. Dragging, plus and minus, Home, and arrow keys call updateRotor() in main.js. refreshKeyState() compares the windows with M · D · T. A wrong test rejects the noise; a correct setting starts animate(), which redraws thirty-six radial-gradient drums near 30fps and stops while the document is hidden.

resolveMessage() then replaces blurred five-letter groups with plaintext, one word at a time. The final match stops the checker, stamps the crib confirmed, removes the Admiralty hold, and animates the convoy’s safe SVG route. Interaction, revelation, and consequence are one chain—not three decorative effects.

SET
M · D · T
CHECK
18,402
READ
PLAINTEXT
TURN
NIGHTJAR
05 / Evidence

Pattern before
meaning.

The traffic wall places HTML index cards over an SVG web of red thread; IntersectionObserver draws those links as evidence enters view. Case 71 reverses the field to cream paper, dark ink, holes, tape, and a comparison slip. In the epilogue, the #declassify click handler toggles .open; staggered CSS transforms retract five redaction bars and return hidden workers’ names to the light.

06 / Material Register

Palette & type.

#0C0A08Blackout
#17120DHut Brown
#E0AE59Lamp Amber
#E9DDC1Index Cream
#BA352BUrgent Red

Zilla Slab carries the human register: broad at display scale, warm in paragraphs, vulnerable in italic. IBM Plex Mono voices the institution—intercepts, times, labels, and machine states. Both are self-hosted. Amber means illumination, red a decision or warning, and cream human testimony.

They said nothing.RX 417 / CRIB CONFIRMED / 02:16
07 / Prompt Brief

Reproduce this.

Prompt an AI agent to build a dark historical-fiction exhibition around one consequential act, not a marketing homepage. Name a material palette, a self-hosted display serif and mono, and six chapters with deliberately different compositions. Require a keyboard-and-drag mechanism, a false-setting response, a word-by-word reveal that changes a later visualization, and a paper dossier that breaks the dark field. Ask for one orchestrated load, hidden-tab animation pausing, reduced-motion fallbacks, and screenshot critique at phone, tablet, and desktop widths.

Agent brief / copy this

Build a cinematic museum room where the visitor’s action reveals information with human consequence. Construct maps, machinery, documents, and signal webs from CSS, SVG, canvas, and one local poster. Let typography, material, and low light carry the story. No external requests; no ornamental interaction; no triumph without aftermath.