01 / Concept spine
From spectacle to absence
The site is structured as an operations record rather than a heroic war story. It begins inside a letterboxed film frame, moves through the procedural confidence of the plotting room, lets nineteen engines gather into a physical wall of vibration, and then subtracts everything. At dawn, three empty concrete circles do the emotional work. The fictional names and numbers create documentary specificity while keeping the subject in a museum and memorial register.
That arc governs the composition. Night sections are crowded, layered and mechanically busy. The final section is pale, wide and almost vacant. “19 out” is oversized and forceful; “16 back” is interrupted by outlined type, then followed by three repeated bays. This is the count-them-out, count-them-back device expressed as layout.
02 / Visual mechanics
Film, chalk, machinery
The hero’s film workflow began with a cinematic still generated in GPT Image 2 through Higgsfield, then animated into a restrained five-second ambient loop with Kling 3.0. The local hero.jpg is the poster for loop.mp4, so the frame has no external dependency. Two CSS searchlights sweep over its scrim and vignette. In main.js, an IntersectionObserver and syncVideo() pause the film offscreen, in a hidden tab, or for reduced-motion visitors.
The operations board is an inline SVG, which keeps every coastline, label, pin and route crisp. plotMission() restarts a stroke-dashoffset animation on the paired yarn paths. Pins arrive at successive delays, chalk notes reveal in stepped clips, and runCounters() advances the ledger with a single bounded animation frame loop. The replay control makes the signature readable at any pace.
The dispersal sequence creates nineteen aircraft from HTML and CSS in main.js. Pressing START adds .engine-on one bay at a time, blurring each propeller and updating a live status line. If FIELD AUDIO is explicitly powered on, addEngine() builds low sawtooth oscillators and filtered noise through the Web Audio API. The result is intentionally abstract: an atmosphere, not a literal recording. Audio is off by default and suspends in a hidden tab.
The dawn control calls toggleMemorialRoll(): it cuts any field audio before revealing twenty-one names inside the three empty pads. Texture comes from a fixed fractal-noise SVG, slate gradients, aluminum rules and paper shadows. Beyond the locally stored hero film and poster, the map, diagrams, teleprinter, silhouettes, weather and memorial traces remain code-generated.
Stroke offset converts one route into a timed line.
Nineteen states build one visible and audible load.
Three outlined pads hold the final subtraction.
03 / Type & colour
Material tokens
#060A0E#AEBBC0#E4C94F#A73D3EBebas Neue supplies compressed command-room scale; Zilla Slab makes the narrative feel printed and humane; Space Mono carries timings, labels and orders. All three are self-hosted. Their jobs never blur, so hierarchy remains legible even when colour is subdued.
04 / Reproduce this
Prompt the structure
Ask an AI frontend agent for a single-page historical-fiction museum experience whose emotional arc moves from preparation to mechanical crescendo to absence. Specify one period material system, three role-specific self-hosted fonts, a code-drawn interactive diagram, and an opt-in synthesized sound scene. Require the final section to reinterpret the opening count through negative space. Also require reduced-motion fallbacks, visibility-paused media and animation loops, semantic landmarks, 44-pixel touch targets, and screenshot review at phone, tablet and desktop sizes. Give the agent concrete fictional records to design with; specificity is what turns an aesthetic into a place.
Prompt anchor: ask for a procedural interaction that changes the page’s emotional temperature—not a decorative animation layered on afterward.