Drafting
notes.

Concept: light on iron

LZ-42 Werft treats the browser as a blueprint room, not a brochure. The fictional 1934 works dossier follows one machine from general arrangement through assembly, section analysis, wind-tunnel testing, and flight release. Prussian blue is the dominant field; warm white behaves like exposed cyanotype paper; faded red appears only where a human inspector has touched the record. Dense technical facts—ring counts, cloth area, revision dates, shift notes—make the fiction feel handled and archived.

Self-drawing plans

The profile and erection drawings are inline SVG in index.html. Their geometry uses real paths, ellipses, clipped gas-cell shapes, dimension lines, and monospaced callouts. In styles.css, the draft keyframe moves stroke-dashoffset from one to zero on paths normalized with pathLength="1". The hero drafts once on arrival. Farther down, setStage() in main.js responds to an IntersectionObserver, progressively revealing ring frames, gas cells, skin, and control car as each workshop note crosses the reading line.

The exploded-view control translates each assembly layer onto a different vertical plane. Beside it, the new inspection lamp moves an SVG mask through moveInspection(), exposing a hidden triangulation and stress trace only inside the circular reticle; pointer movement and focused arrow keys operate the same lens. A live stage meter names the current operation while the sticky plate keeps the machine in view. The frame section later drafts on entry, then rotates subtly through one throttled requestAnimationFrame, like a physical plan turning on a table.

Wind drawn live

drawWind() renders 34 lightweight streamlines into #wind-canvas. Each line samples a Gaussian influence field around the SVG hull model, displacing flow above and below the body. Pointer position or arrow keys change incidence and velocity. The loop begins only while the wind section intersects the viewport, stops when document.hidden is true, and remains still under prefers-reduced-motion. Canvas resolution is capped at 1.5 device pixels; a low-opacity SVG flow field ensures the aerodynamic idea remains legible before motion begins.

Palette & type

Archivo carries compressed technical headings in heavy weights; Zilla Slab gives the narrative the warmth of an engineering ledger; JetBrains Mono owns measurements, times, and drawing references. Fine grid lines, translucent noise, hatched fills, double-rule stamps, paper shadows, and a literal linen edge produce atmosphere while preserving contrast.

Reproduce this

Prompt an AI agent to build “an archival technical narrative, not a conventional landing page.” Specify one dominant historical process, a strict three-color palette, locally hosted characterful type, and a signature diagram that changes meaning across scroll. Ask for semantic HTML, inline SVG engineering geometry, a staged observer-driven assembly, and one interactive canvas simulation whose animation pauses offscreen and on hidden tabs.

The final discipline is restraint: use motion to reveal construction logic, red only for authority and intervention, and texture only lightly enough that the white drafting line remains sovereign.