An AI Designed The Immortal Game — London, 1851 Website — The Trick Behind Its Immersive Chess Narrative

Step into the Historic Chess Room with a Modern Twist

This AI-built site recreates the legendary 1851 London chess match as an immersive experience, placing visitors in a smoky tournament room. Its signature move? A dramatic narrative pause at the queen sacrifice, achieved through a clever scroll-based storytelling technique that visualizes each move with lifelike material cues, creating a theatrical journey through a historic game.

A Streamlined Three-Phase Workflow

The site was developed through a straightforward pipeline: first, a build phase using JavaScript to generate the chessboard and embed the historical move sequence; then, a rigorous critique phase where the design was refined for clarity, pacing, and material authenticity; finally, an art-director review to certify that interactions enhance the narrative. This process was guided by a detailed field manual emphasizing explainability, stability, and accessibility, resulting in a site that is both immersive and educational.

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

Decoding the Material Palette and Interaction Design

The site employs a carefully curated color palette inspired by traditional chess materials: deep felt green, rich mahogany, warm ivory, glowing brass, and vivid crimson for annotations. Typography is handled with Playfair Display for headlines to evoke period drama, Crimson Pro for essays to maintain clarity, and Chivo Mono for move labels, ensuring a layered typographic hierarchy. The core interaction relies on a scroll-driven state machine, where the game’s moves are animated with smooth easing, and visual elements—like the board, pieces, and evaluation meters—are built entirely with HTML, CSS, and SVG. The persistent SVG objects have stable identities, allowing seamless replay and variation highlighting, while the site’s layout adapts responsively to different screens, from phones to desktops. This meticulous approach ensures that each visual and interaction detail supports storytelling rather than just presentation, all without external libraries or network requests, emphasizing performance and clarity.

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 76 of 175, “gambit”):
THE IMMORTAL GAME — one chess game, told like a thriller. Aesthetic: tournament hall 1851; mahogany + ivory. Palette: board cream/walnut, felt green table, brass clock, annotation red. Fonts: playfair-display (display), crimson-pro (body), chivo-mono (notation). SIGNATURE: SCROLL-DRIVEN REPLAY — a beautiful 2D board where Anderssen–Kieseritzky 1851 plays out as you scroll: pieces GLIDE with weight, captures slide off to the rails, the evaluation bar breathes, and at the queen sacrifice the page itself holds its breath (motion pauses, one line of commentary lands alone); every move annotated in margin notes with variations you can peek (ghost pieces). Clock section, the two players’ portraits in text, “why sacrifice” essay. Unforgettable: 23…Be7 landing like a plot twist.

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

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 Historic Game in Its Full Glory

Visit the immersive London 1851 chess room online and explore all 175 interactive projects at the hub. Discover how AI-crafted design can transform history into a compelling visual story.

Visit the live room → · Browse all 175 rooms

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