How the page learns to breathe.

The concept

RED WIRE is a fictional portrait of Kestrel Unit and one suited approach down Quarry Row. Distance from cover reduces the page width: an image-first film frame becomes a narrowing corridor that releases only after safe isolation. The story refuses spectacle. A wrong move produces a pressure pulse, never an explosion. The reward is quiet, widened margins, and a person walking back.

Visual and interaction technique

The hero frame is a letterboxed film plate in styles.css. Visor masks, focus breathing, flare, and telemetry create the helmet view. Condensation follows the pointer; toggleVisor() gives keyboard and touch users the same locked-clear state. resizeDust() and drawDust() animate at most 42 canvas motes, and the loop stops when the document is hidden.

updateFrame() measures .long-walk, writes --walk-progress and --corridor, updates telemetry, and lets CSS close two shutter fields. The page stays compressed at the device. Only completeTrace() adds .resolved, opening it with a long release.

The x-ray is inline SVG. closestSample() compares pointer or touch coordinates with the verified red path; forward movement paints .route-progress. Leaving the conductor calls tensionSpike(), which resets the trace and pulses the edge. completeTrace() isolates the state, suspends sound, and opens the page. A keyboard-assisted trace reaches the identical outcome.

Sound is optional and starts off. After the explicit switch is activated, Web Audio synthesizes two low sine pulses. Their timing rises while their filter and gain dampen during the approach. IntersectionObserver orchestrates section reveals without scroll polling. Reduced motion removes dust, drift, shake, and reveal travel while preserving every state and outcome.

Local film workflow

The key frame began as a GPT Image 2 still, art-directed for a centered suit walk and evacuated-street depth. Higgsfield then carries that still into Kling 3.0 for a five-second ambient loop. Both outputs are designed to remain local at /assets/gen/reddwire/hero.jpg and /assets/gen/reddwire/loop.mp4, avoiding runtime network requests. The loop is absent from this delivery, so the page automatically stages the still with camera drift, focus breathing, dust, flare, and the interactive visor wipe instead of shipping a broken video.

Everything beyond that film plate is code-generated: the x-ray circuit is inline SVG, the tool silhouettes and robot are CSS geometry, the atmosphere is layered gradients and canvas, and the optional heartbeat is synthesized with Web Audio.

Palette and type tokens

Archivo carries the heavy, compressed emotional voice; IBM Plex Mono handles procedure, telemetry, and labels. Both are self-hosted. The palette uses sweat-dark charcoal #101311, suit tan #b9a17a, x-ray blue #80b5c7, wire red #d65448, and marker yellow #d2bd57. Red is reserved for live pressure. Blue describes imaging. Tan returns the physical world.

Reproduce this

Ask an AI agent for a cinematic, single-page museum portrait in pure HTML, CSS, and JavaScript. Specify one narrative interaction that changes page geometry across scroll, an accessible SVG tracing task with a nonviolent failure state, and an emotional release that reverses the geometry. Require self-hosted display and mono fonts, a restrained material palette, optional synthesized audio behind a switch, reduced-motion fallbacks, hidden-tab pause behavior, and screenshot audits at phone, tablet, and desktop widths.