An AI Built a RECON WING | Reading the Earth Like Evidence Website — Here’s the Design Trick That Makes It Work

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

Discover the Recon Wing Digital Exhibition

Imagine a website that mimics a Cold War reconnaissance film roll, inviting visitors to interpret a series of technical images and annotations. This virtual environment, crafted entirely by AI, transforms scrolling into a cinematic journey through a surveillance archive. Its signature feature is the scroll-driven film transport, which seamlessly translates vertical movement into horizontal sprocket movement, revealing frames that shift from negative to positive, echoing the development process of photographic film.

From Concept to Final Exhibition

The project underwent a streamlined three-phase pipeline: initial development involved translating the reconnaissance archive concept into interactive scroll mechanics; critique sessions focused on refining the visual coherence, responsiveness, and performance; and finally, an art director reviewed the iteration, ensuring the experience balanced technical authenticity with aesthetic clarity. Guided by a specialized field manual, the team’s focus was on achieving a believable cinematic atmosphere while maintaining precise control over the scroll-driven film development simulation.

The full build notes live in the room’s design guide.

Design Elements and Technical Interplay

The site employs a carefully curated palette dominated by deep indigos, silvers, and strategic red accents, reflecting the clandestine tone of reconnaissance imagery. Typography combines a wide, mechanical style with monospace details, reinforcing the technical archive aesthetic. Visual components include code-generated diagrams and SVG illustrations—such as cutaway views of camera bays, pressure suits, and terrain maps—that evoke a sense of tangible, schematic documentation. The film transport mechanism is realized through CSS and JavaScript, mapping scroll position to frame development, with dynamic filters controlling contrast, inversion, and highlight effects. Repeating gradients simulate sprocket holes, while subtle grain and scratches are overlaid with CSS animations, creating a tactile, film-like atmosphere. Web Audio oscillators add an ambient layer, enhancing immersion without overwhelming the visuals. Accessibility is prioritized through inline SVG descriptions, reduced-motion options, and responsive design that adapts seamlessly across devices, ensuring visitors can explore the archive whether on desktop or mobile.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 112 of 175, “reconwing”):
RECON WING — high-altitude reconnaissance, Cold-War historical. Aesthetic: dawn stratosphere; film canisters and contrails. Palette: stratosphere indigo→dawn band, aircraft titanium black, film-can silver, red SECRET stamps. Fonts: michroma (display), space-mono (frame data). SIGNATURE: THE FILM STRIP — the page is a developing reconnaissance filmstrip: frames (sprocket-holed) slide horizontally as you scroll vertically, each frame developing from negative to positive as it centers, revealing terrain with annotation callouts typed by an interpreter; the hero film (contrail-at-dawn loop) is frame 001. Camera-bay diagram, pilot pressure-suit ritual, the “we fly alone and unarmed” ethos. Unforgettable: reading the earth like evidence.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/reconwing/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Explore the Digital Recon Wing

Visit the live reconstruction to experience the film transport simulation firsthand and delve into all 175 frames in the comprehensive archive. Discover how AI-driven design creates immersive, technically inspired exhibitions that challenge perceptions of digital storytelling.

Visit the live room → · Browse all 175 rooms

Previously in Wing V

• Room 109: La Citadelle — An Anatomy of Siege, 1693
• Room 102: Flight Deck 0300 — A Night-Launch Documentary
• Room 101: Ghost Division — The Complete Motion Picture Archive

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI