The page is the aircraft.
GYRO treats the browser viewport as a one-kilometre competition box. It is not a page about flying with decoration around it: the interface rolls, pitches, accumulates smoke, and reports load while the reader travels through the sequence. The register is bright and engineered—ultramarine sky, smoke-white geometry, and one wingtip-red warning color.
The narrative travels from the invisible box boundary through a fictional known sequence, four pilots, an inverted fuel system, and finally the judges’ table. Each section owns a difficulty score, or K-factor. The language stays terse because every label should feel stencilled onto a machine or pencilled onto a score sheet.
Flight mechanics.
The Aresti line
The fixed navigation in index.html uses inline SVG aerobatic notation: solid upright lines, dashed inverted lines, roll bars, arrows, and a humpty-bump. update() maps the active section and local scroll to each diagram’s red completion line.
Scroll becomes attitude
Sections carry data-roll, data-pitch, and data-g. update() interpolates them into CSS properties consumed by .flight-stage, the attitude orbit, pressure rail, and swinging g-meter. Through the inverted-systems gate, scroll turns the aircraft plan through a genuine 540 degrees; impact() adds two short arrest beats.
Smoke drawn in code
flightPoint() describes the continuous maneuver spline. drawSmoke() samples it onto the fixed canvas in four rounded strokes: vapor bloom, soft core, hard line, and a red aircraft tip. The trail length equals page progress and uses no image asset.
The invisible line bites
Inside the box section, update() watches local scroll progress and toggles .boundary-breach for one narrow gate. The fixed frame turns wingtip red and a skewed .boundary-event sweeps in with the judge’s −30 deduction, making an abstract boundary physically interrupt the flight.
Live load and scoring
The g-meter converts the active maneuver’s simulated load from the −6 to +8 range into a needle position. The judges’ range input is a real interaction: it applies the visitor’s deduction to the total score immediately. Native meter elements preserve semantic meaning while custom CSS makes them read like pencil marks.
Mechanical atmosphere
The aircraft, competition cube, pilot marks, score sheet, grain, and boundary frame are CSS or inline SVG. Scroll work is rAF-throttled and stops while hidden. Reduced-motion mode removes attitude and impacts while retaining a static smoke trace and the full story.
Palette and type.
Syne provides wide, high-energy display forms; tight negative tracking makes headlines feel like painted fuselage lettering. JetBrains Mono carries K-factors, limits, technical notes, and judge data. Both are self-hosted. The palette is intentionally unequal: Sky Ultramarine dominates, while Wingtip Red is reserved for flight-critical beats. Judge Paper Cream gives the sequence and score sheet a physical pause.
Reproduce this.
Prompt an AI agent to design an editorial site where scrolling performs the subject. Specify one dominant field color, a technical notation system as navigation, section data that drives CSS 3D attitude, a code-drawn canvas trail, and a semantic interactive scorecard. Require local HTML, CSS, JavaScript, and fonts; no image dependencies; responsive phone, tablet, and desktop states; document-visibility pausing; and reduced-motion fallbacks. Ask it to inspect full-page screenshots and correct named visual defects before delivery.