The concept
SEKIGAHARA treats the battle less as a diagram of winners and losers than as a morning whose weather gradually reveals its terrible contents. The visual language borrows from ink wash, rain-dark lacquer, and widescreen jidaigeki framing. Its emotional rule is restraint: spectacle belongs to the field, while the human chapters come close enough to notice wet cord, a shared persimmon, or the temperature of tea. The page ends with no victory tableau, only a riderless horse and returning mist.
The field in mist
The signature sequence lives in the .field-scroll section of index.html. A position: sticky map remains fixed while five full-height .beat chapters pass over it. In main.js, an IntersectionObserver finds the most visible beat and calls setStage(). That stage becomes a data-stage attribute on .map-stage, letting CSS reveal banners, thin the two fog layers, intensify rain, and update the clock without a continuous animation loop.
The pivotal moment is structural, not a decorative label. At stage three, the Kobayakawa banner’s indigo field transitions to deep red while the cloth rotates around its pole with rotateY(180deg). A brief radial impact and callout make the historical hinge legible even at phone width. Every clan emblem is assembled from CSS shapes on code-drawn banners; the mountains, road, and river are inline SVG paths.
Film, rain, and material
The opening frame began as a GPT Image 2 still, then became a five-second Kling 3.0 ambient loop through Higgsfield. Both results are stored locally at /assets/gen/sekigahara/hero.jpg and loop.mp4, so the hero makes no external request. The still is the video poster and the reduced-motion fallback; CSS letterboxing, color grading, rain, scrims, grain, and an anamorphic flare bind the generated film to the page’s sumi palette. An IntersectionObserver pauses the loop offscreen, and tab visibility pauses it again.
Every other visual remains code-generated. Rain is a repeating linear gradient, fog is built from blurred elliptical gradients, and the new “Part the mist” control reveals a masked .memory-field of human traces. Pointer movement updates two CSS coordinates through a single scheduled animation frame; touch and keyboard users can toggle the complete layer. The optional sound switch creates filtered noise with Web Audio, but never starts without an explicit click.
The armor macro is entirely CSS: layered radial lighting, four lacquer plates, an SVG path of indigo lacing, and a narrow moving glint. The tea bowl uses nested radial gradients and two blurred steam forms. Paper letters combine warm surfaces, ruled fibers, irregular clipping, and carefully limited hover lift.
Orchestration and restraint
The load moment is a two-leaf black gate built by .load-gate and the gate-open keyframe; it parts once, then never competes with the story. A second observer adds .is-visible to selected copy blocks for slow, non-repeating entrances. There is no permanent animation loop in JavaScript. CSS motion is disabled under prefers-reduced-motion, and the film becomes the local poster. The live #map-status sentence announces each hour without forcing screen-reader visitors to decode the visual map.
Type and color
Shippori Mincho carries titles, testimony, and large time stamps; Zen Kaku Gothic New handles navigation, maps, and factual annotation. The contrast makes the page alternate between chronicle and field instrument. Sumi #090b0a dominates, with mist grey #d7d8d2. Indigo marks the western army, deep red the eastern army, and muted gold is reserved for time, ritual, and focus.
Reproduce this
Prompt an AI agent to build a cinematic historical longform page around one visible change of state. Ask for a sticky, scroll-driven diagram whose layers reveal with time; code-drawn emblems; one restrained film loop with poster fallback; human-scale archival writing between large spectacle chapters; local serif and sans typography; a dominant near-black field with two faction colors; responsive behavior at 390, 834, and 1440 pixels; explicit reduced-motion and visibility handling; and a silent aftermath that changes the visual grammar completely.