01 / Concept
The page behaves like the storm.
Operation Sandstorm is a fictional film archive, not a military product page. Its emotional center is disorientation: a nine-vehicle column can see only the next green lamp, while a dust wall repeatedly removes the horizon. The interface therefore refuses pristine, stable surfaces. Ochre haze crosses every section; cards look abraded; typography presses against the frame like a title card being swallowed by weather.
The narrative resists triumph. The opening promises scale, but the final ledger counts silence instead of victory. Invented call signs, timestamps and continuity annotations create specificity without borrowing from real operations or giving actionable instruction.
02 / Visual mechanisms
Built from film, dust and signal.
Weather layer
setupWeather() in main.js sizes a fixed canvas and advances capped fields of far dust banks and near diagonal grit. Two slow sine waves modulate gust, changing streak speed, global haze, the live wind number and apparent visibility together. The animation frame stops whenever the document is hidden.
Higgsfield film pipeline
The hero began as a GPT Image 2 still, then became a five-second Kling 3.0 loop through Higgsfield. Both files live locally in /assets/gen/sandstorm/: the JPG is the immediate poster and reduced-motion fallback; loop.mp4 loads only for motion-capable visitors and pauses offscreen. Every other visual remains code-generated.
Total brownout
triggerWhiteout() adds .is-whiteout for 4.2 seconds. The .storm-veil advances through impact, frame collapse, a held zero-visibility phase and return. A restrained camera impact sells the arrival, while an aria-live message announces the state change. Reduced-motion mode removes the sequence.
Opt-in sound
createAudio() builds filtered noise inside the Web Audio API—nothing is downloaded and nothing starts without the Wind switch. The same circuit rises with gust density. Radio buttons call playStaticBurst() to generate short, decaying band-pass bursts rather than recorded dialogue.
Scoured evidence
CSS repeating gradients create grit, scan lines and paper fibres. The route board is a clipped grid with positioned vehicle buttons; choosing one updates an aria-live readout. Field notes combine warm paper, irregular clipping, rotation and translucent “tape” to break the otherwise strict cinematic geometry.
Active acquisition
setScope() toggles an accessible periscope mode. Pointer movement updates two CSS coordinates through one throttled animation frame, moving a masked clarity window across the film; keyboard users toggle the same fixed window. Above the fold, staggered .reveal delays preserve one controlled load moment.
03 / Palette + type tokens
Copper dark. Signal green.
Bebas Neue handles every cinematic heading, number and call sign at compressed line heights. Archivo carries body text, telemetry and annotations. Uppercase microcopy uses wide tracking to imitate archive labels; paragraphs remain mixed case, comfortably spaced, and high-contrast.
04 / Reproduce this
Prompt for atmosphere, not decoration.
Ask an AI coding agent for a responsive fictional film archive in pure HTML, CSS and JavaScript. Specify a fixed particle field whose density changes in waves, with readings, imagery and interactions responding together. Request a letterboxed local film hero, compressed display type, one signal color, tactile evidence, opt-in synthesized audio, an interactive clarity instrument, a four-phase full-page weather event, hidden-tab pausing, reduced-motion fallbacks and screenshot verification at phone, tablet and desktop widths. Give it named fictional artifacts and narrative cost; atmosphere works when content and mechanics describe the same world.