The concept
The visual argument is simple: ceremony survives only while the machine remains under control. Italiana gives the page its club-house voice—long, fragile curves and generous scale—while Archivo behaves like the shore team: compressed labels, numbers, warnings, and instruments. The dominant navy field creates an uninterrupted sea; foam white makes the sails feel almost too refined; gold belongs to both trophy and danger; protest red appears only when the rules bite.
The composition follows the same tension. Expansive editorial headlines sit beside densely ruled data consoles. The hero yacht breaks the grid and seems to skim beyond the viewport, while later sections return to strict manifests, clauses, and numbered ritual.
The wind field
main.js creates a capped set of streak particles in draw(). Each streak samples flowAngle(x, y, t), a lightweight combination of sine waves, cursor position, and the global wind angle. initWebGL() compiles tiny vertex and fragment shaders; every frame streams line heads, fading tails, and alpha values into a single dynamic GPU vertex buffer. The fixed #wind-field canvas now sits above every section with screen blending, so one airflow visibly crosses the whole race without blocking interaction. resize() caps pixel ratio and particle count for predictable performance. Headless audit rendering alone uses an equivalent 2D line path to avoid Chromium readback warnings.
Pointer position changes wind.target, trims the SVG .sail-rig, and gives the full yacht a fractional heel. updateScroll() changes apparent wind speed once per animation frame. An IntersectionObserver maintains the visible sailcloth set; wrong-way scrolling calls triggerLuff(), which runs staggered compositor-only Web Animations without forcing layout. Reduced-motion mode removes particles and flutter; visibility changes cancel and restart every animation frame.
Tactics that answer back
The race map is a real SVG slider, not an illustration. Dragging #lay-handle converts pointer coordinates through getScreenCTM(), recalculates true-wind angle and VMG, then redraws the layline. Arrow, Home, and End keys provide equivalent control. Once the approach exceeds 58 degrees, setHandle() adds .penalty-mode to the page: Race Control turns protest red, the console burns at its edges, and a live region announces how to clear the breach.
The foil laboratory uses a native range control. Above 47 knots it reveals a vapor cloud while live pressure, margin, and attachment telemetry change below the section. The closing ceremony adds a second human-controlled reveal: setHoist() toggles .hoisted on the protocol section, raises the CSS trophy rig, completes the seven-movement signal, and relights each ritual row. The trophy remains code-only—metallic gradients, borders, inset light, handles, stem, plinth, and a pointer-driven specular position.
Palette & type tokens
--serif: 'Italiana' is used at display scale and never faked bold. --sans: 'Archivo' carries body copy, controls, and telemetry from 500–800 weight. Tight display tracking and wide uppercase data tracking make the two voices unmistakable.
Reproduce this
Prompt an AI agent to design a fictional elite regatta where old-world sporting ritual collides with extreme carbon engineering. Require a site-wide Canvas vector field, an SVG yacht whose sail trim responds to pointer wind, cards that visibly luff when scrolling against it, and an accessible draggable layline map that changes global UI state. Ask for a foam, navy, gold, and red palette; elegant self-hosted display type paired with telemetry sans; six content-rich editorial sections; all visuals made from code; mobile, reduced-motion, keyboard, and hidden-tab behavior verified at the end.