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
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.
Popular right now
Roborock Qrevo S Pro Robot Vacuum and Mop, 18,500 Pa Suction
Bose QuietComfort Wireless Headphones – Twilight Blue (Limited Edition)
De'Longhi Magnifica Duo Fully Automatic Espresso Machine with Milk Frother, Silver
As an affiliate, we earn on qualifying purchases.
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.
