HOW TO MAKE
THE SKY AGREE.

THE CONCEPT

Vortex Field Unit treats a storm chase as a disciplined instrument reading, not disaster spectacle. Its central idea is agreement: the storm structure a chaser sees and the reflectivity signature a radar operator reads should evolve together. The opening is therefore not a conventional hero. It is a 420-viewport-high scrubbed sequence with a full-screen sticky observation window. As the reader advances from 17:42 initiation to 19:06 rope-out, the same progress value organizes both images.

The voice balances hard field data with human restraint. Invented crew names, exact roads, probe telemetry, and time-stamped notes make the archive credible. The warning color is reserved for genuinely consequential moments: the hook, contact, and safety rules.

VISUAL SYSTEM

The signature weather lives in main.js. getProgress() converts the sticky sequence’s scroll position to a normalized 0–1 value. drawStorm() uses that number to lower the wall cloud, accelerate nested inflow bands, extend the funnel toward the ground, and finally bend it during rope-out. Irregular paths from cloudBlob(), clipped rain curtains, dust arcs, and a narrow orange horizon build depth without image files.

drawRadar() receives the identical progress value. It paints quantized reflectivity cells, a velocity couplet, then the green, amber, and orange hook. The live sweep only reveals recent returns. At contact, the hook closes as the condensation tube reaches its dust circulation; updateHud() calls out that agreement explicitly and exposes the dual-source vector. The loop stops when document.hidden is true. Reduced-motion mode draws only on scroll or resize instead of running continuously.

The five timestamp buttons are a second route through the same evidence. scrubTo() translates a selected phase back into the sequence’s document offset, so mouse, touch, or keyboard can jump directly to touchdown without creating a separate animation state. When progress crosses 0.72, setAgreementState() triggers a short acquisition flash and holds labeled field and radar fixes on screen while both signatures are mature.

Beyond canvas, pressure traces and the route map are inline SVG. CSS handles the probe target, pulsing map unit, safety tape, grain, vignettes, intersection reveals, and responsive instrumentation. The sequencer is optional: ordinary scrolling still drives the complete record.

PALETTE + TYPE

Anton substitutes for Big Shoulders Display, which is not in the local font library: condensed, blunt, and suited to vehicle lettering. Headlines run near 0.8 line-height, while JetBrains Mono carries labels, times, and data. Off-white avoids a sterile dashboard white. Green means live evidence, amber means judgment, and orange appears only where circulation, sunset, or danger breaks through.

REPRODUCE THIS

Prompt an AI agent to build a self-contained severe-weather field archive in plain HTML, CSS, and JavaScript. Specify a sticky multi-screen canvas sequence driven by one normalized scroll value, and require that both a visible supercell funnel and a separate radar hook reach maturity at the same progress point. Ask for accessible timestamp controls that scrub both views together and a labeled lock reveal at contact. Request layered procedural cloud paths rather than stock images, a restrained green-black palette with only amber and sunset-orange alerts, condensed display type, monospaced telemetry, time-stamped field writing, probe data, an SVG intercept map, and a blunt safety section. Require responsive tests at 390, 834, and 1440 pixels, reduced-motion behavior, paused hidden-tab animation, and zero external requests.