01 — CONCEPT SPINE
THE GANTRY CATHEDRAL
Titan Works treats industrial assembly as a commissioning ritual. The hangar is not a neutral backdrop: floodlights become stained glass, cranes become the ribs of a nave, and the workshop copy shifts between severe engineering language and tired-worker humour. The fictional ARK-9 “Morrow” is framed as a rescue platform, so its colossal scale carries moral weight rather than celebrating harm. The story begins with raw spectacle, passes through the labour of construction, and ends with the machine’s first humanitarian assignment.
02 — SIGNATURE MECHANICS
SCROLL AS OVERHEAD CRANE
- 01CORE0—18%
- 02LEGS10—40%
- 03ARMS28—69%
- 04PRESSURE66—86%
- 05OPTICS86—100%
The centrepiece lives in index.html as one layered inline SVG. Its torso, legs, arms, head, hooks, pistons, reactor, and eyes are separate groups. In main.js, render() converts scroll distance into --assembly, then partProgress() applies smoothstep timing to 6 dedicated part variables. Transform formulas in styles.css swing each group from a different direction and window. Five threshold beats update the stage label, hydraulic pressure, and eye state.
At each impact, burst() emits a capped set of short-lived particles onto #spark-canvas, while a brief CSS shake sells the weight. thunk() builds a low servo hit from an oscillator, filter, and gain envelope; Web Audio is created only after the visitor enables the switch. The final threshold adds .eyes-on, igniting the face and turning the bay glow orange. Reduced-motion visitors receive the complete, already-assembled machine without the long scrub.
The hero uses the supplied still as a poster because no loop file exists. Layered scrims, trussed silhouettes, grain, slow scale drift, and three clipped floodlight cones create the missing film movement. The only particle animation loop stops when empty and visibility handling pauses work whenever the document is hidden.
03 — FILM ASSET WORKFLOW
FROM STILL TO HANGAR FILM
The key plate began as a 16:9 GPT Image 2 still through Higgsfield, then became a five-second ambient Kling 3.0 loop grounded in the same frame. Both outputs belong in /assets/gen/titanworks/ as hero.jpg and loop.mp4. Here the loop is absent, so .hero-film stages the still with film-breathe, scroll parallax, flood cones, gantry silhouettes, colour grading, and film-gate scrims. The composition stays cinematic without making a failed request.
Everything else is code-generated: the layered ARK-9 SVG, sparks from animateParticles(), telemetry, pilot-link diagram, placards, and Pass 3 optical chamber. igniteOptics() directs the final eye event; the azimuth range writes --azimuth, steering the inspection beam by touch, pointer, or keyboard.
04 — PALETTE & TYPE TOKENS
IRON, ARC, WARNING
Archivo Black carries titles because its blunt mass resembles stamped hull lettering. Archivo handles long-form reading with a compact, workmanlike voice. Orbitron is restricted to telemetry and plates; tight uppercase labels and wide tracking make those fragments feel issued by the yard. Fluid clamp() scales preserve that hierarchy from phone to hangar-sized desktop.
05 — REPRODUCE THIS
ISSUE THE WORK ORDER
Prompt an AI agent to design a dark cinematic industrial microsite around one physical process, with self-hosted display and technical fonts, one restrained hot accent, and an inline SVG split into mechanically meaningful layers. Ask it to map a long sticky scroll section to custom properties, give each component its own alignment window, and reserve the strongest light and sound beat for the narrative climax. Require a static reduced-motion state, explicit audio consent, mobile-specific composition, semantic landmarks, and screenshot review at phone, tablet, and desktop widths. Finally, ask for in-world writing rich enough that the interface feels discovered rather than decorated.