ASSEMBLY NOTES / SITE 137 OF 175

FIELD
GUIDE.

How a browser, twenty-four SVG paths and one scroll position became a fictional high-bypass assembly hall. No photographs, generated media, libraries or external requests were used.

01 / CONCEPTTitanium cathedral

The visual thesis treats the factory as a secular nave and every fan blade as a reliquary. Monumental Orbitron headings provide the architecture; IBM Plex Mono gives every note the authority of a calibration record. The page alternates dark hangar volume with cold silver inspection light, so movement between sections feels like walking from assembly floor to metrology cell.

Specific numbers—a 3.41 m fan, twenty-four diffusion-bonded blades, a 15:1 bypass ratio and witnessed torque entries—make this feel like a living works archive. Each composition changes form: radial reliquary, flow diagram, split test cell, then ledger.

02 / SIGNATUREThe fan

In main.js, a loop creates twenty-four copies of bladePath inside #fanBlades, rotating each copy by fifteen degrees. syncScroll() maps the three-viewport .spool-stage to an N1 value from 8 to 100 percent. The same value is writable through #spoolRange, making the fan genuinely thumb-spoolable on a phone.

animate() integrates rotation using frame delta and a squared spool curve, so windmilling drift becomes takeoff urgency without a speed jump. At 68 percent, setSpool() adds .shock-active. That single state reveals both the dashed transonic tip shimmer and its pressure-wave caption at the exact same threshold. The animation frame loop stops when the document is hidden, and reduced-motion users receive a static rotor.

All metal is SVG gradient and CSS shadow. The intake depth comes from nested circles, the hub from a shaded cone, and the hangar from intersecting linear gradients. The page proudly uses no generated assets: Wing VI's speed is expressed entirely through code.

toggleBladeScan() switches #bladeSpecimen from titanium skin to a clipped SVG honeycomb lattice. Pointer position moves the scan gate; touch and keyboard users receive the same reveal, and an observer demonstrates it once on entry.

03 / SYSTEMSFlow & failure

The cutaway is a second inline SVG. Its two blue .bypass-stream paths surround the gold-to-violet .core-stream; animated dash offsets make the 90/10 air split readable without particles or canvas overhead. Beneath it, the thrust equation converts mass flow and velocity change into 125 kN, giving the visual an engineering conclusion.

The containment test is interaction rather than ornament. Pressing Containment event restarts blade-release, scar-flash and impact-shake: the blade leaves the hub, the case absorbs it, then the scene settles. The final balance cell turns another range input into grams; updateBalance() moves the rotor and changes the acceptance verdict when trim exceeds ±1.0 g.

04 / MATERIALSPalette & type

The dominant field is hangar black, with titanium reserved for structure and text. Ignition blue signals air, control and certification. Inconel heat tint moves from gold through coral into violet, appearing only where temperature or impact justifies it.

COLD METALTHERMAL LOAD →HEAT TINT
VOID
#070A0D
TITANIUM
#D7DEE1
IGNITION
#9BD8FF
INCONEL
#F0BD63
HEAT VIOLET
#9A71BD
TORQUE / 8,960ORBITRON 700 + IBM PLEX MONO 400

05 / REPRODUCEPrompt the machine

Give an AI coding agent one industrial subject, one governing interaction and a technical content system. Require code-native visuals, a precise state threshold, responsive touch control, reduced-motion behavior and screenshot inspection at phone, tablet and desktop widths.

Build a responsive code-only microsite about a fictional precision machine. Treat its assembly space as sacred architecture. Use a self-hosted engineered display face and a mono inspection face. Make one SVG mechanism dominate the first viewport and map its physical state to scroll plus a large touch range. Reveal an explanatory annotation at a meaningful threshold. Follow with a cutaway, a destructive-test essay, a dense specification ledger and one fine-calibration interaction. Use no external media; pause motion offscreen or when hidden; inspect screenshots at 390, 834 and 1440 pixels.