Imagine a digital exhibition that fuses Victorian engineering documents with a modern network console, allowing visitors to traverse the depths of the Atlantic cable through a single scroll. This immersive experience, crafted by an AI-driven design process, employs an innovative scroll-sampling technique to animate a historic submarine cable, making 3,700 kilometers feel tangibly close. At its core, the pièce de résistance is a signature interaction: a scroll-driven pulse that travels along an SVG path, simulating the cable’s journey beneath the ocean while revealing layers of history and technical detail.
The project unfolds in a three-phase pipeline: first, the design team gathers inspiration from Victorian engineering folios and technical diagrams, translating these into digital assets and SVG landscapes. Next, a rigorous critique ensures that the interaction feels intuitive, the visuals evoke the appropriate atmosphere, and accessibility standards are met—particularly milestones for screen readers and reduced-motion preferences. Finally, an art director reviews the iteration, certifying that each element—from palette choices to scroll-timed animations—serves the narrative purpose. This structured process ensures the site not only captivates visually but also functions seamlessly across devices, guided by the comprehensive design interaction manual provided by the AI-generated guide.
The full build notes live in the room’s design guide.
The design’s visual language hinges on a carefully curated color palette reminiscent of Victorian engineering and oceanic depths—deep blues, copper tones, warm creams, and vivid reds. These hues are applied through layered CSS gradients, SVG contours, and textured overlays that evoke a sense of depth and materiality. Typography plays a crucial role, with self-hosted typefaces like spectral and IBM Plex Mono lending authority and clarity to the technical narrative, while Victorian-inspired headlines reinforce the period feel. The signature technique—sampling an SVG cable path in real-time—integrates seamlessly with JavaScript functions that convert scroll progress into dynamic visual updates, creating a fluid and visceral sense of crossing the ocean’s abyss. This approach marries a meticulous visual aesthetic with a precise interactive pulse, transforming static history into an engaging, kinetic experience.
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 58 of 175, “cablegram”):
THE ATLANTIC CABLE COMPANY — undersea telegraphy, 1858→now. Aesthetic: Victorian engineering meets bathymetric chart. Palette: deep chart blue #0e2a42, cable copper, gutta-percha cream, red route lines. Fonts: six-caps (masthead), spectral (body), ibm-plex-mono (telegrams). SIGNATURE: RACE THE SIGNAL — a bathymetric cross-section of the Atlantic (SVG seafloor profile: shelf, abyssal plain, mid-ocean ridge) where your scroll is a telegraph pulse traveling the cable; depth/pressure/latency readouts run, repeater stations ping as you pass, and a paper tape prints your message letter-by-letter on arrival in Ireland. The 1858 failure story (Whitehouse’s 2000 volts), cable cross-section anatomy, latency table 1858 vs 1958 vs today. Unforgettable: being the pulse.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/cablegram/
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.
Experience the full voyage by visiting the interactive site, where history and technology converge beneath your fingertips. Explore all 175 AI-crafted exhibition sites at the dedicated hub and discover the innovative signature technique that brings Victorian engineering vividly to life in the digital age.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 52: The Royal Mews — Falconry House, Est. 1487
- Room 53: Core Facility 53 — 120,000 Years Under Pressure
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.
Victorian engineering technical diagrams book
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
