THE CONCEPT
Flight Deck 0300 is a night-operations documentary, not a product page or operating manual. The fictional carrier CVS Orison appears through one launch cycle: machine, colour-coded crew, then the quiet in which they remember the pilot inside it. The last chapter reverses a safe landing and ends on the only count that matters: eighteen launched, eighteen recovered.
The page’s narrative unit is permission. Every readout, shirt and gesture allows the next event to happen.
Names, airframes and timings are invented. Specificity creates belief without offering instruction or celebrating harm. The loudest event lasts barely a second; the rest belongs to labour, uncertainty and return.
VISUAL SYSTEMS
The key frame began as a GPT Image 2 still through Higgsfield, then entered a Kling 3.0 image-to-video workflow for a five-second deck loop. Outputs live locally at /assets/gen/flightdeck/. Because this build contains hero.jpg but no loop.mp4, the opening uses the still full-bleed: .film-poster supplies a restrained push-in, while smoke, scanline, flare and letterbox layers create camera atmosphere. The frame returns later in a human crop, changing from spectacle into testimony. All other visuals are generated in HTML and CSS.
The signature shot occupies 2.8 viewport heights. updateCatapult() in main.js converts the sticky section’s travel into a normalized tension value. That one value drives steam percentage, deflector angle, end speed, accumulator pressure, rail progress, image zoom, saturation and the four phase labels. At 90.5 percent, fireLaunch() adds the firing states: instruments evacuate left, a white-blue-orange wash crosses the viewport, “LAUNCH” expands through the frame, and @keyframes pageLaunch physically whips the documentary shell off-axis before it settles.
requestUpdate() limits scroll work to one animation frame per paint and does nothing in a hidden tab. renderBoard() cycles fictional sorties every 3.6 seconds; clockTick() advances the 03:00 documentary clock; startAmbientSystems() safely restarts both timers after visibility returns. An IntersectionObserver reveals the four trap frames from stop to approach, so the recovery reads right-to-left on desktop and top-to-bottom on a phone.
The interactive bindSignalTranslator() system turns three native buttons into a documentary light table. Each role changes a data-signal state on .signal-section; CSS custom properties then swing the two glow wands, reposition the arms, recolour the haze and replace the captioned testimony. It works with pointer, touch and keyboard input, while the visuals remain deliberately abstract rather than instructional.
Reduced-motion mode removes image drift, smoke travel, shake and launch wash. Telemetry still resolves and the reverse trap remains visible; the poster is a complete fallback, not a placeholder.
TYPE & COLOUR
The local library does not include Big Shoulders Display, so the closest self-hosted condensed face, Bebas Neue, carries the deck-marking scale and narrow silhouettes. JetBrains Mono handles documentary narration, timestamps and telemetry. Headlines use a compressed 0.62–0.76 line-height; body copy holds a calmer 1.75–1.9 rhythm so the page can alternate impact with evidence.
Charcoal owns the field. Steam white provides editorial breathing room. Acid green appears only for confirmation and human signalling; orange is stored energy; exhaust blue marks distance, weather and recovery. Violet remains confined to fuel crew, preventing the palette from becoming evenly decorative.
REPRODUCE THIS
Prompt an AI agent for a semantic HTML, CSS and vanilla JavaScript documentary. Supply one strong local still, a fictional event with consequence, condensed display type and technical mono. Ask for a scroll-linked physical metaphor that changes several measurements before one brief whole-page transformation. Require a poster fallback, hidden-tab pausing, reduced motion, 44-pixel targets, contrast and responsive screenshot verification.
Key direction: “Make the browser feel bolted to the machine. Spend spectacle once; spend the rest of the page explaining who made it possible and why safe return matters.”