How to draw
a courteous siege.

Concept: geometry as violence

The site treats the fictional 1693 siege of Montfaucon as an archival object, not a victory page. Its governing tension is between the immaculate manners of a royal engineer’s atlas and the human cost encoded by each red line. The page therefore begins as cinema, shifts into explanation, becomes an instrument the visitor can operate, and closes as a memorial. Historical vocabulary and invented field notes keep the voice specific without presenting operational instruction or celebrating harm.

The working siege plate

The signature interaction lives in index.html inside #siege-stage. The fortress, river, contours, parallels, zigzag saps, batteries, breach, sortie, and casualty register are precise SVG layers. Every trench has pathLength="1"; updateSiege() in main.js converts the selected night into strokeDashoffset, so the earthworks appear to be dug rather than switched on. A sticky 205-vh stage maps scroll to the same 24-night state as the range input and 8 phase buttons.

Shell fire uses #trajectory-canvas. animateShells() schedules only while the map is visible and the tab is active; drawTrajectories() scales atlas coordinates, draws quadratic arcs, moving shell heads, expanding smoke, and a brief transform-only impact. Device pixel ratio is capped at 2. Reduced motion gets a still analytical trace.

Engraving and cinematic atmosphere

The establishing image is staged as a letterboxed film frame in the `.hero-film` layer. A slow scale correction, pointer parallax, moving warm flare, directional scrims, and reticle marks lend it camera presence without video. Under reduced motion, those transforms collapse to a still poster. Across the paper chapters, tiny repeating gradients mimic laid fibers; an inline SVG turbulence texture supplies fixed grain. Map hatching is built with SVG patterns, while low-opacity construction circles and oversized folio numerals create the second-read detail of a working archive.

The local film plate

The key frame was created with GPT Image 2 through Higgsfield, then prepared for a five-second Kling 3.0 ambient loop and stored locally under /assets/gen/citadelle/. This room’s delivered package contains hero.jpg but no loop.mp4, so the hero honestly uses the poster fallback: CSS lens drift, smoke, flare, scan texture, and pointer parallax provide motion without a failed request. Every fort plan, trench, range, breach profile, and memorial ring elsewhere remains code-generated SVG, canvas, or CSS.

Palette and type tokens

Cinzel carries monumental display lines; EB Garamond supplies the humane archival voice; Space Mono labels ranges, folios, dates, and instruments. All three are self-hosted. The main tokens are declared in :root in styles.css, where restrained hairlines and near-black fields let the red sap marks remain the sole sharp accent.