An AI Built a Broadside — The Gun Deck, 1805 Website — Here's the Design Trick That Makes It Work

AIThis post was created with the assistance of artificial intelligence (AI).

Broadside — The Gun Deck, 1805 — State Machine Interactions — Room 116 of 175: “Broadside — The Gun Deck, 1805” — visit the live site.

The “Broadside” website is a digital reconstruction of a 1805 naval gun deck, designed entirely by AI to evoke the disciplined rhythm of maritime warfare. Its signature move is a meticulously choreographed sequence that guides visitors through a historical moment, using interactive scroll states and visual storytelling that mimic the tension of a firing drill. This site exemplifies how AI can craft a layered, immersive experience rooted in historical accuracy and subtle visual cues.

Before you orderOffer from Amazon

Get art and craft supplies delivered free with Prime

Fast, free delivery on millions of items
Prime Video, Amazon Music and more included
Member-only deals all year

Start your free Prime trial Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.

The site’s color palette draws from authentic maritime hues—deep oak, navy blue, gunmetal gray, and signal red—each chosen to evoke the environment of a warship’s gun deck. Typography plays a crucial role: a high-contrast serif, reminiscent of printed manuals, sets the authoritative tone, while functional controls are set in a squared, mechanical slab font. The core interaction revolves around a scroll-driven state machine, where scrolling maps to specific actions like raising signals or firing cannons, all orchestrated via precise CSS and JavaScript. Visual effects include camera drift, smoke overlays, and subtle parallax, all achieved through CSS transforms, inline SVG diagrams, and Web Audio for optional sound effects. This layered approach ensures that each movement feels deliberate, mimicking the tension and routine of 1805 naval life.

Live view of Broadside — The Gun Deck, 1805 — The room as it renders live — open it in your browser.

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 116 of 175, “broadside”):
BROADSIDE — a ship-of-the-line gun deck, 1805 (historical). Aesthetic: oak, hemp, powder smoke; Trafalgar light. Palette: oak brown, gun-metal black, powder smoke white, signal-flag primaries. Fonts: playfair-display (display), zilla-slab (body). SIGNATURE: THE GUN DRILL — one 32-pounder crew cycles in cross-section (worm, sponge, load, run out, FIRE — recoil slams the carriage against breechings, smoke floods the deck and clears): scroll steps the drill, the broadside moment fires all guns down a receding deck with staggered thunder (synth, behind switch) and the page recoils. Signal-flag hoist that spells the famous “England expects…” (each flag decoded), rate-of-fire tables as the real weapon, surgeon’s cockpit below waterline (sober). Hero film (sail and smoke loop). Unforgettable: the rolling broadside timing.

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

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.

This project followed a three-stage pipeline: first, the site was built using pure HTML, CSS, and JavaScript, with an emphasis on accessibility and performance. Next, it underwent a rigorous critique rooted in historical authenticity and technical cohesion, ensuring each interaction felt authentic and seamless. Finally, an art director review confirmed the visual harmony and narrative clarity before deployment. Guided by an AI-designed concept, the process prioritized disciplined craftsmanship, from detailed visual coding to interactive storytelling, resulting in a site that balances historical reverence with modern web techniques.

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

Experience the full immersive journey firsthand by visiting the live “Broadside” site. While you’re there, explore the entire collection of 175 AI-crafted projects at the main hub—each a testament to the potential of AI-driven artistic web design.

Visit the live room → · Browse all 175 rooms

Previously in Wing V

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.