Get business pricing on tech for your team
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
Discovering La Citadelle
La Citadelle is an AI-generated interactive exhibition simulating a 1693 siege of Montfaucon. Its standout feature is a dynamic, scroll-driven diagram that transforms historical terrain and military movements into a cinematic, explorable experience—meticulously crafted without any embedded images, relying solely on layered SVGs, CSS, and canvas elements. This approach creates a compelling digital monument that balances historical fidelity with artistic storytelling, all orchestrated by AI-powered site logic.
Products Worth Considering
Jackery Explorer 300 Portable Power Station, 292Wh
Jackery Explorer 2000 v2 Portable Power Station with Two 200W Solar Panels
Jackery Solar Generator 1000 v2 with 200W Solar Panel
As an affiliate, we earn on qualifying purchases.
Build, Critique, Certify: The AI-Guided Workflow
The project follows a streamlined three-stage pipeline: initial construction using layered SVGs, CSS, and canvas elements; an iterative critique driven by AI analysis of visual coherence, responsiveness, and historical plausibility; and final approval by an art director ensuring the piece balances educational intent with aesthetic restraint. This process is guided by a detailed field manual authored by an AI assistant, emphasizing layered architecture, precise interactions, and emotional depth rooted in the fictional siege narrative.
The full build notes live in the room’s design guide.
Behind the Layers: Palette, Typography, and Signature Interaction
The site employs a restrained color palette rooted in parchment, fortress ink, smoke, and vivid red accents, establishing an atmosphere of archival gravitas. The typography combines the monumental elegance of Cinzel with the humane clarity of EB Garamond and Space Mono for labels, creating a layered textual hierarchy. The signature interaction centers on a multi-layered SVG siege map, where each layer—grid, fortress, trenches, and trajectories—is animated through precise JavaScript functions that update stroke dash offsets, simulating earthworks being dug in real time. The cinematic ambiance is enhanced by a subtle filmic overlay, achieved through CSS transforms, parallax effects, and animated textures modeled after historical engravings, all constructed without relying on static images, thus ensuring scalability and fidelity 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 109 of 175, “citadelle”):
LA CITADELLE — star-fortress siege engineering, 1693 (historical). Aesthetic: engraved siege atlas; bastion geometry. Palette: parchment, fortress ink, glacis green, cannon-smoke grey, blood-red sap lines. Fonts: cinzel (display), eb-garamond (body), space-mono (ranges). SIGNATURE: THE SIEGE PLAYS OUT on a bastioned star fort (precise SVG geometry): parallels and zigzag saps dig toward the walls night by night (scroll = siege days, trenches draw themselves), batteries unmask and fire arcing shells (canvas trajectories with smoke puffs), a breach forms; the defense counters with sorties. Vauban’s geometry explained (why the angles), a ravelin/hornwork glossary, the honorable-surrender protocol. The hero film (fortress at dusk loop) opens it like an establishing shot. Unforgettable: geometry as violence, drawn politely.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/citadelle/
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 Site and the Assembly Line
Visit the live exhibition to experience the cinematic siege tableau firsthand. For those interested in the full spectrum of AI-crafted digital exhibits, browse all 175 sites at the central hub, witnessing how AI can forge complex, layered, and emotionally resonant history displays without a single embedded image.
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 108: Night Rotors — Flight 47 After Dark
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.
