FIELDGUIDE

The concept

RECON WING treats the page as a roll of reconnaissance film moving through a light table. The visitor is not given a neat military timeline. They become the interpreter, advancing frames with vertical scroll and waiting for each exposure to resolve. The content stays in museum territory: observation, isolation, technical ingenuity, and the human cost of flying at the boundary of survivable atmosphere. Red is reserved for classification marks and analytical callouts, never spectacle.

The film transport

The signature sequence lives in .film-section, whose runway gives the sticky .film-sticky stage time to operate. In main.js, render() maps vertical progress onto the horizontal distance between the first and last frame. Each .film-card is measured against the viewport center and receives --dev, a zero-to-one development value.

That value controls inversion, grayscale, contrast, frame lift, registration light, and the enlarger beam. A distant exposure reads as a negative; the centered frame resolves into a positive. startTranscription() types the interpreter note when a frame locks. The Pass 3 analyst loupe is toggled by .loupe-switch; positionLoupe() maps pointer, touch, or arrow-key input to the circular inspection glass and live grid coordinates. Repeating gradients punch the sprocket holes without image assets.

Cinematic atmosphere

The hero workflow began with a GPT Image 2 still, then a matching five-second loop was planned in Kling 3.0 through Higgsfield. Both outputs are stored locally under /assets/gen/reconwing/. The loop file is absent in this delivery, so hero.jpg becomes the full-bleed poster and render() supplies restrained scroll parallax instead. Indigo, black, and amber scrims color-grade the frame; the flare, optical-axis mark, gate corners, and edge data make it feel captured rather than placed.

The remaining visuals are code-generated: scanned grain, film scratches, terrain, camera bay, pressure suit, reticles, canister, and dawn bands use CSS or inline SVG. Cabin tone stays behind an explicit switch and uses three quiet Web Audio oscillators. Visibility handling suspends audio and all requestAnimationFrame work while the page is hidden. Reduced-motion mode removes drift, grain animation, reveal staging, and smooth scroll while preserving every reading state.

Diagrams drawn in code

The camera bay is an accessible inline SVG cutaway, not a decorative image. Paths describe the fuselage shell, film reels, optical cone, heated window, airflow, and numbered leader lines. The pressure suit is another SVG assembled from silver gradients, geometric limbs, and dark seam lines. Terrain frames use CSS ridges, a river, road grids, shadows, and an SVG topographic field. These deliberately schematic visuals feel like objects from the same technical archive.

Palette and type

Michroma supplies the wide, mechanical display voice; Space Mono carries coordinates, frame counts, notes, and body copy. The scale is deliberately discontinuous: mission language fills the camera gate, while evidence remains compact but readable. Tracking tightens on display words and opens on classification data.

Reproduce this

Give an AI frontend agent a narrative mechanism, not only an aesthetic. A useful prompt would be:

Build a cinematic historical microsite that behaves like a physical evidence object. Turn vertical scroll into a horizontal sprocket-holed film transport. Make frames develop from negative to positive at the viewport center, with technical annotations revealed by the same progress value. Use one dawn photograph, code-drawn diagrams, a strict indigo, silver, and red palette, and self-hosted wide display plus mono fonts. Include responsive and reduced-motion fallbacks, an optional user-triggered synthesized ambience, and audit at phone, tablet, and desktop widths.

Ask the agent to inspect rendered screenshots after the first build. The effect depends on real spacing, readable frame centers, and a balanced sticky duration, so visual iteration matters as much as the code.