Cold archive
open record
The concept
The War Room is framed as a museum visit rather than a military fantasy. Its central idea is a machine built to describe an ending clearly enough that humans can refuse it. The page begins with a distant, cinematic room and gradually moves toward individual objects and ordinary lives. Escalation feels seductive for only a moment; the final chapter deliberately drains the spectacle away. The fictional names, sites and incident keep the subject safely in memorial territory while giving the archive a credible internal history.
Visually, the composition borrows the severe symmetry, overhead pool of light and widescreen tension of a late-modern political thriller. That order is disturbed by asymmetric captions, the lone red phone and the increasingly frantic board. Sharp corners, steel rules and compact labels make every section feel catalogued rather than marketed.
01The Big Board
The map in index.html is a single accessible SVG. Simplified continent paths sit over nested grid patterns. Ten quadratic Bézier paths form the great-circle routes. CSS gives each route a normalized pathLength, then route-draw animates its dash offset. Contact circles can be clicked or keyboard-activated; the handlers in main.js update the live contact register. A persistent .board-dossier receives the active chapter, so the story remains legible inside the instrument at every breakpoint.
02Escalation state
updateScrollState() measures the five narrative chapters and passes the nearest one to setDefcon(). That function changes a single data-defcon attribute on the body. CSS custom properties then move the dial needle, shorten the radar cycle, change phosphor color and reveal more route traffic. At condition two, ringPhone() gives the red phone one brief physical tremor while .line-k-indicator makes the event visible. The now-armed verification key calls setVerification(), sliding a comparison glass over the map to expose the source-card error.
03Teleprinter and sound
typeMessage() builds each transmission one character at a time, with speed tied to the current condition. The BELL lamp flashes at completion. Sound is off by default. Only the explicit audio switch creates a Web Audio context; tone() then synthesizes small sine-wave chimes and the single phone signal. Visibility checks pause activity when the tab is hidden.
04Film atmosphere
The hero uses the supplied poster as a movie frame with CSS scrims, grain, scan lines, letterbox bars and a narrow anamorphic flare. Pointer position produces a restrained depth shift. In reduced-motion mode the image becomes static, route cycles complete instantly and sticky storytelling becomes a readable linear document.
05Local film plate
The key still was created with GPT Image 2 through Higgsfield, then designed for a Kling 3.0 ambient-loop pass in the same pipeline. Both are stored locally when the motion file is available, avoiding external requests. This archive currently stages /assets/gen/warroom/hero.jpg as the poster fallback because the local loop is absent; hero-gate-weave, pointer parallax and the projection shutter provide cinematic motion instead. Every other visual—the map, radar, phone, grain, flares and instrument graphics—remains code-generated in HTML, SVG and CSS.
Type signal
Six CapsSpace Mono / labels, records, narrative copy
Reproduce this
Prompt an AI agent to build a self-contained museum experience around one consequential machine. Specify a towering condensed face, a functional monospace, one dominant dark material field and one object color. Ask for a single scroll-driven state machine that controls several visual systems at once, not separate decorative animations. Require an accessible SVG centerpiece, code-built artifacts, real keyboard states, reduced-motion fallbacks, and optional synthesized audio behind an off-by-default switch. Finally, make the last section reverse the emotional direction of the spectacle.