The concept
Project Icarus turns a fictional proximity-flight record attempt into an instrument for managing fear. The visual language begins above a dawn granite cliff, but the deeper subject is restraint: conservative clearance, repeatable checks, and the courage to walk back down. The dominant experience moves from cinematic instability to the ordered calm of a field manual. Every visual is made with code because Wings VI and VII deliberately have no generated media library.
The page’s narrative spine is “commit, descend, resolve.” Dawn rose and sky cyan soften the engineered telemetry; jumpsuit crimson carries risk, selection, and the intended line. As the page reaches the valley, layouts become more geometric and reading becomes unhurried.
Visual techniques
Scroll as exit
In main.js, renderFlight() maps progress across the 210vh sticky sequence. It transforms the slab, boots, cliffs, terrain and flyer at different rates. The altimeter and phase readout use the same progress value, so spectacle and data cannot drift apart.
Code-built granite
styles.css constructs the mountain range and near walls with clipped gradient polygons. Nested facets, hard shadows, atmospheric desaturation, and different scale curves create depth without bitmap images. A rose sun, horizontal air rules, and a narrow cyan valley thread give the frame its dawn altitude.
Glide path lab
updateRatio() reads the range input, recalculates cubic Bézier control points, and replaces the SVG d attributes for both the crimson route and cyan safety envelope. Distance, minimum clearance, and flare reserve update from the same ratio. It is a working model for visual comparison, clearly presented as projection rather than flight instruction.
Instrument details
The altimeter rail uses a moving repeating-linear-gradient tick field. The wind compass has one lightweight animation loop, paused when the document is hidden. Suit hotspots update an aria-live anatomy panel, making the Vanta R-7 diagram useful by keyboard and touch.
Spoken ritual
Each .check-trigger is a real toggle with aria-pressed. updateChecks() counts the confirmations and changes the verdict only when pressure, horizon and body have all been answered. The interaction makes restraint operational, not ornamental.
Motion discipline
The scroll handler only schedules one animation frame and writes transforms, opacity, and text. prefers-reduced-motion replaces the drop with a gentle fade descent, removes speed lines, and keeps the final composition legible. The only ambient loop also stops for reduced motion and tab invisibility.
Orchestrated arrival
The load moment uses stage-arrival and copy-arrival once, then removes both animations so scroll transforms remain authoritative. One IntersectionObserver lifts a slight atmospheric filter as sections arrive, but never hides content if a browser jumps past it.
Stand-down hold
beginStanddown() gives the wind rules an ethical action: holding for one second closes the line, parks the compass, and records walk-back twelve. Pointer and keyboard paths share the same cancellable timer, while visibilitychange aborts an unfinished hold so a hidden tab cannot make the decision.
Palette and type
Syne supplies wide-shouldered display forms; Manrope keeps instructions and telemetry precise. Both are self-hosted. Thin-air black carries long reading, dawn rose is atmospheric rather than decorative, cyan marks recoverable margin, and crimson is reserved for decisions.
#DCA0A0#424948#D7463D#8ED5DD#202625Reproduce this
Prompt an AI agent to build a code-only editorial experience around one physical action, then make the first scroll perform that action. Specify a sticky multi-layer scene, a single shared progress model for visuals and telemetry, one meaningful SVG control, a material-led palette, self-hosted display and body fonts, keyboard-operable details, and a reduced-motion narrative that preserves the emotional arc. Ask it to test at phone, tablet, and desktop widths, inspect rendered screenshots, and revise concrete composition flaws before delivery.