How ‘LEGIO IX — The Ninth on Campaign’ Renders SIGNATURE TECHNIQUE With Zero Image Assets

Age 18–24?Offer from Amazon

Prime made for students and young adults

• Fast, free delivery for dorm and study essentials
• Prime Video and Amazon Music included
• Member-only deals

Try Prime for Young Adults →Free trial for eligible 18–24 year olds

As an affiliate, we earn on qualifying purchases.Hide

Discover the Digital Arena of LEGIO IX

This AI-crafted exhibition immerses visitors in a meticulously designed campaign archive, where movement, memory, and materiality converge. Its centerpiece is a dynamic SVG formation that responds seamlessly to scroll actions, simulating tactical maneuvers with artistic precision. What sets this experience apart is its ability to animate complex military formations without relying on external image assets, delivering a pure, self-contained digital spectacle.

The Visual and Technical Palette

The design employs a restrained, battlefield-inspired color palette featuring shades of iron, dust, and crimson red, establishing a commanding atmosphere. Typography tools include a sharp Cinzel typeface for headings, evoking inscriptions carved in stone, paired with Crimson Pro for annotations that maintain clarity and warmth. The entire interface relies solely on self-hosted assets—SVGs, CSS gradients, and locally stored fonts—eliminating external requests and enhancing performance.

The Signature Interaction System

The core interaction revolves around a scroll-controlled SVG formation, which interpolates four key tactical states to mimic the movement of military units. This is achieved through a carefully orchestrated JavaScript pipeline that interpolates coordinate data, smoothly transitioning formations as users navigate. To heighten immersion, a synthesized sound effect precisely tied to the formation’s movement plays, crafted with a low-pass filter to emulate the impact of a marching column, all managed within the same codebase.

Streamlined Three-Stage Workflow

The creation of this digital installation followed a rigorous process: initial development focused on building the formation interpolation system, which was then subjected to relentless critique to refine motion smoothness and responsiveness. Finally, an art director evaluated the results to ensure the aesthetic cohesion of the military theme. This process was guided by a dedicated AI assistant, which ensured adherence to the conceptual and technical standards throughout.

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

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 117 of 175, “legioix”):
LEGIO IX — a Roman legion on campaign (historical epic). Aesthetic: eagle standard against storm light; leather, iron, dust. Palette: legion red, iron grey, dust ochre, storm slate. Fonts: cinzel (lapidary), crimson-pro (body). SIGNATURE: FORMATIONS THAT DRILL — a century of shield-men (SVG figures) reforms as you scroll: marching column → line → TESTUDO (shields click overhead one by one with wooden knocks) → wedge, arrows shattering on the shell; the eagle-bearer’s oath in lapidary caps; a marching-camp blueprint that stakes itself out nightly (SVG plan drawing). Kit table (what 30kg feels like), the centurion’s vine-staff ladder of ranks, pay-and-salt ledger. Hero film (standards in storm light loop). Unforgettable: the testudo click-click-click.

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

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 Campaign

Visit the interactive exhibit to explore the full depth of this digitally reconstructed military archive. For enthusiasts and scholars alike, all 175 project sites are available at the central hub, each crafted with the same meticulous attention to detail and technical sophistication.

Visit the live room → · Browse all 175 rooms

Previously in Wing V

• Room 116: Broadside — The Gun Deck, 1805
• Room 109: La Citadelle — An Anatomy of Siege, 1693
• Room 102: Flight Deck 0300 — A Night-Launch Documentary

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