Inside Room 103 of 175: The Making of “Viper Squadron | Night Operations Crew Room”

Imagine stepping into a digital cockpit designed by an AI, where every pixel immerses you in the tense atmosphere of a night sortie. This virtual crew room, crafted without human hands, captures the essence of a vigilant fighter squadron at rest but always alert. Its signature feature is a dynamic HUD simulation, turning scrolling into a rhythmic identification exercise—an interactive dance of find, identify, and confirm, all within a cinematic night sky setting. This AI-built environment evokes the feeling of being inside a real pilot’s canopy, alive with subtle details that hint at ongoing missions and the bond among crew members.

This project was developed through a three-phase pipeline: initial construction based on the guide’s specifications, an intensive critique to refine visual and interaction fidelity, and a final approval from a virtual art director. The entire process adhered to the core principles of a detailed flight manual, emphasizing realism, cinematic tension, and functional authenticity, all curated to evoke the emotional register of an alert night sortie. Through this iterative approach, the site achieves a delicate balance between immersive simulation and elegant design, built entirely with HTML, CSS, and JavaScript, with no external media required.

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

Color Palette and Typography

The visual tone centers on a dark, night-sky palette dominated by deep slate and subtle amber accents, creating a moody yet focused atmosphere. The HUD elements utilize a phosphor-inspired green hue, contrasting sharply with amber warning signals and rare red impact indicators. Typography plays a crucial role, with Michroma providing a stencil-like, engineered feel for section commands and names, while IBM Plex Mono delivers legible, technical data in a clean, monospaced style. This deliberate pairing enhances the sense of a high-tech, operational environment.

Signature Interactions and Building Blocks

The site’s core interaction revolves around a simulated pilot’s HUD, where pointer and bank inputs animate layered optical systems—pitch ladders, radar, and acquisition reticles—at different depths. The hero shot is a cinematic, grainy poster that sets the tone, with particle effects and haze seeded onto a sky canvas, creating a sense of depth and motion. Code-driven elements like the radar, telemetry, and target acquisition boxes are built using procedural scripts, ensuring that even in a static environment, the systems feel alive and responsive. Call signs are rendered as inline SVG patches, each embroidered with multi-stage shadows and dashed borders, reflecting a crew-room wall of badges. On mobile, the target box simplifies into a compact status rail, maintaining essential info without cluttering the view.

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 103 of 175, “vipers”):
VIPER SQUADRON — a fictional fighter squadron’s crew room. Aesthetic: HUD green over canopy night sky; patch culture. Palette: night-sky slate, HUD phosphor #9fff5e, warning amber, squadron patch colors. Fonts: michroma (display), ibm-plex-mono (HUD). SIGNATURE: a live HUD overlay on the hero film (cockpit/afterburner loop): pitch ladder that responds to mouse (banking the view), airspeed/alt tapes ticking, target boxes acquiring section headings as you scroll (lock tone optional behind switch). G-meter that spikes on fast scroll. Squadron roster as callsign patches (each an SVG patch with embroidered texture), sortie board, the “check six” tradition note. Unforgettable: locking onto the next section.

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

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 Squadron

Experience the full night sortie environment firsthand by visiting the live crew room. Dive into the detailed systems, interactions, and ambience designed by an AI, and browse through all 175 unique virtual crew rooms at the central hub. Step into the cockpit—virtually—and feel the tension of night operations from the safety of your screen.

Visit the live room → · Browse all 175 rooms

Previously in Wing V

• 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