DESIGN FILE / PUBLIC COPY

Building the descent.

Silo 9 is designed as a museum visit, not a weapons interface. Its tension comes from vertical space, preserved ritual and the moment a machine refuses to become spectacle.

Concept: machinery yields to memory

The experience begins in a hard, letterboxed frame using the supplied control-room poster. Institutional labels establish place and date, while the immense SILO 9 title behaves like a film credit. The visitor then moves downward rather than across a conventional landing page. Each section sheds a layer of machinery: architecture, procedure, daily routine, dismantling and finally remembrance. Warning red appears only where a real warning lamp would live. It is never a decorative accent.

The descent and ceremony

In main.js, renderDescent() measures progress through the 405-viewport-height descent track. It maps that progress to nine named levels, updates the CRT floor indicator, drives the counterweight, and moves shaft lines through --depth-progress, --shaft-shift, and --streak-shift. The sticky elevator cage in styles.css holds the view while oversized level records pass outside it. Work is scheduled in requestAnimationFrame, pauses when the document is hidden, and simplifies under reduced motion.

The ceremony uses two actual button controls. setKey() records each station, opens a three-second synchronization window and accepts simultaneous pointer input, sequential clicks, or the Z and slash keys. resolveCeremony() never arms anything. It extinguishes the warning lamp, softens the room grade and focuses a docent plaque with the historical truth. Web Audio is equally restrained: startHum() synthesizes a low three-oscillator cable hum only after the visitor explicitly switches it on.

From still to underground cinema

The hero follows a Higgsfield film workflow: a GPT Image 2 still establishes the control room, then that frame is used as the visual source for a five-second Kling 3.0 ambient loop. Production assets are stored locally under /assets/gen/silo9/, so the experience never calls an external host. This delivery includes hero.jpg but no loop.mp4; renderHeroMotion() therefore stages the still with pointer and scroll parallax, drifting CSS vapor, a light flare and a letterbox aperture. An IntersectionObserver pauses the animation offscreen, visibility handling stops it in a hidden tab, and reduced motion leaves a stable poster.

The Level 09 threshold is also code-made. openBulkhead moves two CSS steel leaves, updates its museum status and transfers focus to the interpretation behind them. All other photographs are inline SVG evidence plates; the cutaway, CRT telemetry, grain, key hardware and archive paper remain HTML, CSS or SVG rather than generated imagery.

Palette and type tokens

VOID #080B0B
CONCRETE #89908B
CRT #78C4B6
STEEL #C4CBC6
WARNING #B9433E

Archivo carries the museum’s institutional voice, with aggressive negative tracking at display scale. Chivo Mono handles floor readouts, accession labels, times and controls. The pairing separates interpretation from evidence without introducing a third visual voice.

Reproduce this

Build a cinematic, single-page museum experience around a preserved industrial ritual. Choose one physical journey as the scroll structure. Use a self-hosted grotesk and mono pair, a material-led dark palette, one safety color used only in context, and sharp steel-like borders. Stage one locally stored generated film frame as a full-bleed environment, with a poster fallback and restrained parallax. Make the signature interaction require two visitors and let its payoff reveal human meaning rather than power. Draw supporting evidence with SVG and CSS. Include reduced-motion behavior, paused hidden-tab animation, keyboard operation and a responsive two-touch control.