An AI Built a Silent Running — Beneath the White Sea Website — Here’s the Design Trick That Makes It Work

Imagine a digital submarine voyage where the interface mimics a deep-sea expedition through icy waters, all crafted by an AI. The site’s signature move is its pressure-based scrolling, transforming vertical movement into a sensory descent beneath the Arctic ice, immersing users in a narrative of silent exploration.

The site’s visual language hinges on a carefully curated palette, combining dark hull tones with vivid signals: alarm red, sonar green, and icy blue. Typography employs a monospace style reminiscent of command consoles, reinforcing the maritime theme. The interface’s core interaction—scrolling—represents a pressure descent, with each chapter reflecting a different depth and atmospheric state. Visual elements like a periscope view, sonar waves, and atmospheric overlays are generated through CSS and canvas techniques, creating a layered, immersive environment. Subtle motion effects—slow camera drift, grain textures, and chapter pulses—enhance realism without overwhelming the user. An intersection observer ensures contact points and environment cues update dynamically, maintaining a sense of ongoing sonar contact and situational awareness.

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 104 of 175, “silentrunning”):
SILENT RUNNING — a submarine command drama under the ice, fictional. Aesthetic: red battle-lighting interior; sonar dark. Palette: hull black, battle red #c22e2e wash, sonar green rings, ice blue through periscope. Fonts: sora (display), chivo-mono (depth/bearing). SIGNATURE: the page IS a dive — depth gauge falls as you scroll, hull groans (synth, behind switch), red lighting pulses at action stations; an active SONAR display pings and paints contacts (each content section is a contact classified on approach: “biologic… merchant… CONTACT, bearing 047”); the hero film (under-ice loop) fills the periscope view with bearing scale. Thermal-layer diagram, silent-routine rules card (“nothing drops, nothing slams”), the ice-transit log. Unforgettable: the ping that finds the next chapter.

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

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 project was developed through a three-phase pipeline: initially, a detailed conceptual framework was built based on the pressure and depth metaphor, translating narrative beats into visual and interactive states. Next, a rigorous critique was applied, focusing on atmospheric authenticity, coherence of visual language, and accessibility of information. Finally, the design received certification from a virtual art director—an internal review confirming that every technical detail, from CSS effects to audio cues, served the story’s immersive intent, as outlined in the comprehensive guide.

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

Experience this submarine voyage firsthand by visiting the live site, where the AI-crafted environment responds to your scroll as if diving into icy depths. Explore all 175 chapters in the full exhibition hub, and see how digital storytelling can emulate immersive exploration.

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
• Room 103: Viper Squadron | Night Operations Crew Room

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