Field
Guide

Concept: trust is visible

Whiteout School is fictional, but its emotional rule is exact: when landscape disappears, the team’s shared line becomes the only reliable geometry. The site makes that rule physical. A rope persists above every chapter while weather can erase the archive beneath it. The sequence moves from a graded blizzard film into rope doctrine, a zero-horizon crossing, orange shelter, a clinical cold ladder, a dexterity drill, and finally the proof that all five trainees returned. White dominates by area, ice blue holds structure, orange means temporary heat, and red is reserved for the rope or an action that cannot be ignored.

The live whiteout

main.js measures every data-storm chapter once, then weatherState() interpolates between section centres and adds a short transition gust. That one intensity controls wind, skin temperature, visibility, headline shiver, and the fixed canvas. drawSnow() moves a capped particle set, introduces two low-frequency gust waves, and raises a glare field on a sixth-power curve. The dedicated crossing reaches 0.995 intensity: the archive genuinely disappears, the header and instrument tray withdraw, and only .rope-layer plus its signal plate remain above the storm.

The same state moves the traveler knot from 18 to 82 percent of the viewport and swaps its live phase and distance copy. Scroll work is scheduled through one animation frame; every loop stops when document.hidden is true. The hero film is observed and paused offscreen. Reduced-motion users get the poster, no canvas, no shiver, and instantaneous transitions.

Film to field

The opening plate began as a GPT Image 2 still, then became a five-second Kling 3.0 ambient loop through Higgsfield. Both files live locally at /assets/gen/whiteout/: hero.jpg is the poster and reduced-motion fallback, while loop.mp4 supplies muted movement. CSS adds the polar grade, anamorphic flare, breathing lens, letterbox, vignette, and optical log. Everything beyond that film plate remains code-generated.

Drawn systems

The shelter is inline SVG: paths form the tent skin, occupied air, load spine, heat bay, snow bank, and callouts. A CSS thermal strip makes the outside/inside differential readable before the drawing. The rope team, ghosted crossing figures, severity ladder, pulse tags, lens flare, grain, and snow are all code. The cold ladder grows physically taller as symptoms escalate, keeping its tone clinical instead of heroic.

The Kestrel-9 console is a working nine-second simulator. setReadyStep() arms one scrambled control; tick() drains time and finger response. During the zero-horizon crossing, advanceGrip() turns a sustained pointer or keyboard hold into five returning pulse tags, making trust an action rather than a caption.

Palette and type

Sora carries tightly tracked display text and plainspoken field copy. JetBrains Mono owns measurements, logs, controls, and machine state. Headlines use a severe negative track and compact leading; telemetry stays small but high-contrast. The tokens in styles.css are intentionally uneven:

Reproduce this

Prompt for a narrative interface whose metaphor remains physically present through the entire scroll. Give one dominant atmosphere and one safety accent a strict semantic role. Require the environment to change data as well as appearance, then demand a real interaction, code-drawn diagrams, phone/tablet/desktop captures, reduced-motion behavior, and a second visual critique.