The brief, interpreted
A FIELD ARCHIVE,
NOT A THEME PARK
LEGIO IX treats campaign life as an exhausting system of movement, building, accounting and memory. The visual language borrows from iron, scored leather, surveyor’s plans and wax tablets. A dominant dark field makes legion red feel like a command, never decoration. The narrative moves from spectacle toward consequence: eagle, burden, deductions, then the names missing at roll call.
The composition stays deliberately asymmetrical. Monumental Cinzel headings occupy territory; Crimson Pro annotations sit on ruled lines like accession notes. The supplied poster is staged inside a bordered film plate with scratches, dust and storm exposure, not used as a generic full-page wallpaper.
Signature system
FORTY MARKS,
EIGHTY MEN
In main.js, formations stores four coordinate fields. renderFormation() interpolates neighboring positions from #drill-scroll progress. The forty SVG figures are created once, so the browser changes transforms instead of rebuilding the DOM.
Across the testudo threshold, shield paths rise and flatten in order. woodenKnock() schedules short triangle-wave strikes through a low-pass filter; sound exists only after explicit opt-in. When the shell locks, the arrow layer wakes, the field jolts, and the impact counter changes. Touch controls now scroll to the true formation position rather than showing a temporary state.
The camp plan answers military motion with construction. An IntersectionObserver adds .drawn; normalized SVG dash offsets reveal the roads and perimeter before forty-four generated stakes seat around the wall.
The local Higgsfield pipeline
ONE FRAME,
LIVING STORM
The key image began as a GPT Image 2 still generated through Higgsfield, then entered a Kling 3.0 image-to-video workflow for a five-second ambient loop. Both outputs are designed to live locally under /assets/gen/legioix/, so the film treatment never depends on a remote request. The still is the color and composition master; the motion pass is restrained to standards, cloud light and airborne dust rather than turning the frame into spectacle.
In this delivery the loop file is absent, so hero.jpg becomes the cinematic source. hero-breathe supplies slow camera drift, pointer movement writes the --hero-x and --hero-y offsets, lightning times the storm exposure, and gate-weave scratches sell the film plate. The remaining visuals—the forty shield-men, arrow volley, camp plan, load silhouette, wax tablet and surface grain—are all generated in SVG, canvas, HTML and CSS.
The texture stack stays local: one generated poster, inline SVG turbulence for grain, CSS gradients for ochre paper and iron vignettes, and self-hosted Cinzel and Crimson Pro. No external script, font or image request is made.
Palette + type
IRON, DUST,
LEGION RED
LEGION
IRON
STORM
DUST
BONE
The main tokens live in :root: --red, --iron, --slate, --dust and --bone. Red is reserved for orders, impacts and deductions. Cinzel ranges from tightly tracked 8px metadata to compressed display capitals; Crimson Pro sits at 18–20px with open leading so operational detail still reads warmly.
Reproduce this
PROMPT THE
WHOLE SYSTEM
“Build a cinematic historical field archive in pure HTML, CSS and JavaScript. Choose one forceful material palette and two self-hosted typefaces. Make the central interaction a scroll-controlled SVG formation interpolating four meaningful tactical states. Tie an opt-in synthesized sound precisely to the signature movement. Add a secondary line-drawn plan, documentary tables, responsive touch controls, reduced-motion behavior, and a final memorial beat. Use no external requests.”