Steal This: The SIGNATURE TECHNIQUE Behind “Station X — The Night Convoy”

Imagine stepping into a darkened museum room crafted entirely by an AI, designed to immerse visitors in a clandestine world of codebreaking and secrecy. The space isn’t just a static display; it invites tactile interaction, where visitors manipulate the environment—adjusting settings, dragging controls—and watch language and meaning unfold before their eyes. The pièce de résistance is a signature technique that seamlessly blends motion, materiality, and narrative to create a visceral sense of discovery that feels both earned and consequential.

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

The experience hinges on a carefully curated palette of deep blacks, warm browns, luminous ambers, and soft creams—materials that evoke vintage machinery and secret documents. Typography is split between a self-hosted serif for the narrative and a monospace for machine states, reinforcing the theme of human effort versus mechanized processes. The core interaction employs a keyboard-and-drag mechanism, allowing visitors to adjust a simulated cipher rotor, with responses that trigger a cascade of visual revelations. These include a word-by-word plaintext reveal that later transforms a visual map, breaking the dark field with a tactile paper dossier. The entire setup is built using a local pipeline of CSS, SVG, canvas, and embedded media, emphasizing independence and meticulous control. The signature technique—an orchestrated blend of motion and material—ensures that each revelation is a deliberate, earned moment, reinforced by reduced-motion fallbacks and subtle animations that calibrate the experience across devices.

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 110 of 175, “stationx”):
STATION X — a WW2 codebreaking hut, historical fiction. Aesthetic: blackout hut; bakelite, index cards, rotor brass. Palette: blackout brown-black, lamp amber, card cream, rotor brass, one urgent red. Fonts: zilla-slab (display), ibm-plex-mono (cipher). SIGNATURE: BREAK A MESSAGE — an intercepted ciphertext ticks in; you set three rotor wheels (drag to rotate, letters clicking) and the bombe-like checker grinds (canvas drum spin) until the crib lights: the message decrypts word by word — and it matters (a convoy rerouted; the site tells that consequence). Traffic-analysis wall of intercepts, the “careless operator” story, secrecy-for-30-years epilogue. Hero film (hut/lamplight loop) as the establishing shot. Unforgettable: the plaintext resolving under your hands.

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/stationx/

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.

The design process begins with a detailed build phase, where visual elements, interactions, and materials are assembled based on the declassified manual’s guidance. This is followed by a rigorous critique, focusing on the authenticity of the tactile and atmospheric qualities, ensuring that motion, materiality, and narrative work harmoniously. Finally, an art director certifies the experience, confirming that each element—typography, interaction, and media—effectively conveys the story of secrecy and consequence, all within a self-contained, device-agnostic framework. The entire process emphasizes authenticity, engagement, and storytelling clarity, guided by the manual’s principles.

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

Experience the full depth of this AI-crafted exhibition firsthand by visiting the live room, where every interaction reveals a new layer of secret history. For a broader view of the entire collection, browse all 175 rooms at the dedicated hub, each built with the same meticulous attention to atmospheric detail and narrative tension.

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