The concept
The central idea is tempo, not spectacle. A broadside only matters after the visitor understands the disciplined labour that makes it possible. The page begins as a cinematic frame, moves through the material facts of one 32-pounder, and then slows into a six-part drill. Its palette shifts with altitude: hot oak on the gun deck, Trafalgar blue around the signal hoist, grey-white smoke after firing, and drowned green-black in the surgeon’s cockpit.
All names and returns are invented, while the physical and signalling context is museum-like. The tone refuses triumphalism. Its last two chapters make visibility and human consequence as important as iron and timing.
Routine creates the spectacle.
Consequence interrupts it.
Visual and interactive techniques
The poster as a moving film frame
The hero uses /assets/gen/broadside/hero.jpg as a full-bleed background. Because no loop file exists, camera-drift moves the poster beneath blurred smoke, an anamorphic flare and hard letterboxes. The reduced-motion query freezes the frame without removing its information.
The gun drill state machine
In main.js, setStep() maps six scroll markers to captions and a data-step attribute. CSS exchanges tools and shifts the SVG carriage. Labelled buttons mirror every state, so the mechanism works without precise scrolling or motion.
Rolling thunder
fireGun() reveals a perspective battery while triggerRecoil() moves the page on the compositor. Nine flashes and smoke plumes inherit index delays. If THUNDER is armed, boom() builds each report from a falling oscillator plus filtered noise. Audio remains local, opt-in and suspended while the page is hidden.
The interactive signal book
The flags are CSS paintings made from circles, diagonals, quarters and stripes. Each hoist is a real button: pointer, tap, focus, and arrow keys call activateSignal() to reveal its codebook word and watch officer’s reading. The separate hoist control keeps the staggered rise interruptible.
Higgsfield film workflow
The key frame was generated as a GPT Image 2 still, then designed for a Kling 3.0 ambient loop through Higgsfield, with both outputs stored locally under /assets/gen/broadside/. This room received hero.jpg but no loop file, so the explicit fallback in styles.css color-grades and moves the still with camera-drift-pass3, pointer parallax, smoke, flare, and letterboxes. Every other visual remains code-generated with CSS, inline SVG, or Web Audio.
Palette and type tokens
#17120E
#704323
#DDD9CE
#CF352E
#E0B83F
#244D6A
Playfair Display supplies the compressed, high-contrast display voice. Zilla Slab handles body copy, controls and records: its squared serifs feel printed and mechanical without becoming pastiche. Display sizes use a tight negative tracking value; metadata opens out into small uppercase letterspacing.
Reproduce this
Prompt an AI agent to choose one historical mechanism and make its sequence the page’s navigation. Ask for a sticky cross-section built from inline SVG, explicit scroll states mirrored by accessible controls, and one climactic interaction whose motion affects the page itself. Specify a dominant material palette, locally hosted editorial type, CSS-made diagrams, sober interpretive writing, an opt-in Web Audio layer, and a reduced-motion version that preserves every fact. Require screenshots at phone, tablet and desktop widths, then make the agent fix named visual defects before delivery.