FIELD
GUIDE.

THE CONCEPT

Ironclad Works treats the browser as a working restoration ledger rather than a conventional museum brochure. The visitor enters through a letterboxed film frame, descends into five workshop bays, then reaches the test stand. The visual arc changes with the object: wet rust becomes exposed steel, red oxide becomes the dominant intervention colour, and olive drab arrives only when Hull 38 is mechanically complete. The story is fictional and deliberately framed around preservation, labour, provenance, and consequence. The machine is interpreted as evidence, never as an invitation to harm.

THE RESTORATION ARC

Each station in index.html owns an inline SVG cutaway. Shared geometry keeps the silhouette recognizable, while the layers change from corrosion cracks to open structural ribs, a highlighted drivetrain, primer coat, and final running condition. Annotation leaders, measurement notes, workshop dates, and separate parts data make the drawings feel used rather than decorative. CSS classes such as .rusted, .drivetrain, .primed, and .running shift the fill, stroke, and cutaway logic. The page grid behind every SVG continues the drawing-office motif at full width.

FILM, HEAT, AND STEEL

The film workflow starts with a GPT Image 2 still and normally sends that frame through Higgsfield to a five-second Kling 3.0 loop, stored locally beside its poster. Here hero.jpg is present but loop.mp4 is absent, so the hero uses the specified fallback: heroPush, scroll parallax, CSS smoke drift, flare and reticle motion stage the still without a failed request. Reduced motion freezes all of it. Every cutaway, map, ledger, gauge, spark and smoke ring elsewhere remains code-generated.

THE MAGNETIC LAMP

setupInspectionLamp() maps pointer position and arrow keys to --inspect-x and --inspect-y. A radial mask exposes a second SVG of hidden seams only beneath the virtual lamp. The toggle announces its pressed state and remains keyboard-operable.

THE FIRST CYLINDER

The finale is a working state machine inside the start-button listener. Timed stages update primer pressure, starter RPM, the cylinder catch, and stable idle. If the visitor explicitly enables the sound switch, starterSound() creates a rising sawtooth whine, catchSound() fires a filtered noise transient, and idleSound() frequency-modulates a low oscillator into a rough twelve-cylinder pulse. Web Audio is never created without consent. The catch also triggers one brief full-panel impact, page shake, warmer light, and five staggered CSS smoke rings. Pressing again stops the engine and clears its state.

PALETTE AND TYPE

Archivo Black supplies compressed mass for the display language; Chivo Mono handles every part number, measurement, control, and paragraph. Both are self-hosted. The contrast comes from scale and material colour rather than extra font families. Sharp corners, fine rules, double-line forms, chalky bone text, and a fixed grain layer keep the page inside one workshop vocabulary.

FILE MAP

index.html

semantic bays, inline cutaways, workshop records

styles.css

material tokens, responsive staging, catch impact

main.js

arc telemetry, sparks, audio and engine state