Steal This: The Signature Technique Behind “SEKIGAHARA — The Field in Mist, 1600”

Prime Big Deal Days · Oct 6–7Offer from Amazon

Get art and craft supplies delivered free — and shop member deals

• Fast, free delivery on millions of items
• Access to Prime Big Deal Days deals on October 6–7
• Prime Video, Amazon Music and more included

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

As an affiliate, we earn on qualifying purchases.Hide

Experience the Unfolding Battle in Mist and Ink

Imagine a web exhibit that immerses viewers in a historical battlefield, where weather and time subtly reveal the story rather than overt narration. This AI-crafted site captures the shifting fog, rain, and light of the 1600 Sekigahara conflict, emphasizing restraint and atmospheric storytelling. Its signature move? A scroll-driven, layered diagram where visual layers emerge in harmony with user navigation, creating a living canvas that echoes ink wash paintings and cinematic silence.

The Three-Pass Creation Pipeline

This project was developed through a disciplined three-stage process: initial construction based on design principles and technical experimentation, a ruthless critique to refine visual harmony and interaction fidelity, and a final approval by a virtual art director to ensure adherence to the storytelling intent. The guide served as a blueprint, emphasizing layered storytelling, weather simulation, and accessibility considerations, resulting in a site that balances cinematic quality with subtlety and restraint.

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

Palette, Typography, and Interactive Layers

The site’s visual language centers around a near-black background, with two faction colors—indigo and deep red—used to mark opposing armies. Complemented by a muted gold for ceremonial elements, the palette evokes traditional sumi ink aesthetics and misty landscapes. Typeface choices—Shippori Mincho for headings and Zen Kaku Gothic for navigation—enhance readability and contrast, establishing a clear chronicle versus scene dichotomy. The interactive layers are built from CSS shapes and SVG paths, forming cloth banners, mountain outlines, and watercourses that assemble dynamically. Rain and fog are simulated through CSS gradients and filters, blending seamlessly into the scene. The core signature is a sticky, scroll-sensitive map that reveals detailed banners and terrain features as the user advances, achieved through a combination of IntersectionObserver triggers and CSS data attributes that modulate visual states—such as rain intensity, fog layers, and banner rotations—without relying on continuous JavaScript animations. This structure ensures a restrained, contemplative experience that marries old-world aesthetics with modern code craftsmanship.

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 118 of 175, “sekigahara”):
SEKIGAHARA — the dawn of one battle, 1600 (historical, Kurosawa-framed). Aesthetic: ink mist, banners, rain. Palette: sumi ink, mist grey, banner mon colors (deep red/indigo/gold), rain silver. Fonts: shippori-mincho (display), zen-kaku-gothic-new (body). SIGNATURE: THE FIELD IN MIST — a scroll-length battle map where clan banners (mon SVGs on poles) emerge from drifting fog layer by layer as the morning unfolds hour by hour; the pivotal defection plays as banners TURNING COLOR mid-field (the moment history hinged); rain intensifies to the clash then stops dead at the aftermath section, which is only mist and a single riderless-horse silhouette. Armor lacing macro, the tea-before-battle ritual, letters written the night before (translated, human). Hero film (banners in rain loop). Unforgettable: the banners turning.

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

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.

Discover the Scene in Action

Visit the live exhibition to witness how layered visual states unfold as you scroll, revealing the battlefield’s story through meticulously crafted code and atmospheric effects. Explore all 175 sections at the central hub to appreciate the depth of this AI-constructed historical narrative.

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