The concept
Overwatch School treats precision marksmanship as a fictional steel-target sport, never as combat. Its central idea is that weather is the real moving subject. The page begins inside a letterboxed dawn film frame, then narrows into a scope and finally opens into the slower rituals around observation: data cards, breathing, class structure, and reflection. The tone is disciplined rather than celebratory. Misses are evidence, and the reward is the clean, unmistakable ring of a steel plate.
The visual hierarchy borrows from range instrumentation. Oversized condensed headlines behave like commands seen at distance. Small monospaced labels feel written for gloves and low light. Red appears only as a consequential beat: flags, the send control, an impact state. Amber is the information layer carried through the reticle, readings, corrections, and the dawn itself.
Visual & interaction system
The film frame
The hero begins with a still generated in GPT Image 2, then supplied through the Higgsfield workflow that normally animates the frame into a five-second Kling 3.0 loop. The local /assets/gen/overwatch/hero.jpg is present; loop.mp4 is not bundled in this room, so .hero-image uses the required code-driven fallback. hero-drift, smoke, an anamorphic flare, pointer parallax, letterboxes, and graded scrims create camera presence. Reduced-motion mode freezes every continuous layer.
The wind call
The scope is a CSS scene: clipped terrain, animated flags, reticle lines, mil dots, target geometry, vignetted glass, and a displaced mirage texture. In main.js, sendShot() stages the three-round lesson, while flyShot() draws its delayed tracer. The controls are not props: updateTurrets() tracks each 0.1-mil detent and correctionMatched() unlocks the next send only when the call is dialled. recordImpact() leaves all three results etched in the glass. On round 3, celebrateRing() swings the plate, opens the optical echo, and unseals the after-action strip. Optional Web Audio remains behind the explicit switch; ringSteel() layers four oscillators into a synthetic steel chime.
Breath and data
breathLoop() maps an 8-second cycle to both the bench meter and miniature scope gate. A shot only releases during the 2-second natural pause, turning timing into part of the lesson. The loop cancels when the document is hidden and becomes static under reduced motion. The range book turns a conventional table into a tactile dope card with imperfect rotation, punch holes, handwriting, and a drawn drop trajectory. Tabular numerals keep each correction aligned while making accumulated data feel physical.
Palette & type
The brief requested Big Shoulders Display, but that family was not present in the project library. Bebas Neue is the self-hosted condensed substitute used for poster-scale headlines and numeric impact. Chivo Mono carries field notes, conditions, table data, and controls. The core tokens in styles.css are --ink, --range, --amber, --flag, and --paper.
Reproduce this
Ask an AI coding agent for a dark, cinematic single-page experience built around one real interaction rather than a decorative hero. Give it a strict palette, one display face and one technical face, and require every atmospheric layer to be code or a local poster. Describe the interaction as a narrative with visible state changes, timed feedback, sound behind consent, a reduced-motion fallback, and a mobile composition that keeps the signature usable.