The concept
FREEFALL treats formation skydiving as kinetic typography: bodies are dots, grips are lines and altitude is the page’s clock. The fictional Echelon 8 team gave the experience a believable human culture—dawn loads, creeper-board rehearsals, packing-mat rules and audible cues—without borrowing any real team or competition identity.
The emotional arc moves from hard, engineered velocity to softness. Indigo at the aircraft door becomes royal blue at terminal speed, then cyan and cloud white beneath an open canopy. Magenta marks every decisive act: a jumper’s head, a grip change, an audible tone and finally the canopy itself.
Formation engine
The signature lives in main.js. Four coordinate arrays define STAR, OPEN ACCORDION, DONUT and BIPOLE. renderFormation() interpolates each of eight SVG groups between those arrays with a smoothstep ease(), while small perpendicular drift suggests tracked separation between points. Connection arrays redraw the relative-work grips as each topology changes.
update() converts each sticky section’s scroll position into a fractional transition. A three-phase regroup separates the bodies, fades the old grips, then settles the new topology; the altitude rail descends from 4,000 metres to the 800-metre deployment threshold. Work is scheduled through requestAnimationFrame only after scroll or resize, and visibility changes stop all rendering while the document is hidden.
IntersectionObserver adds .is-visible; a compressed, falling heading brakes into natural proportions.--break drives eight CSS bodies from one grip picture into radial quadrants. .break-replay restages that release on demand.easeOutBack() feeds --bloom and --skin, giving the main wing an elastic inflation while seven CSS canopies open in delayed echelon.Visual system
The display face is Outfit at heavy weights, tightly tracked until words behave like aerodynamic objects. IBM Plex Mono carries altitude, slot codes and grip notation. Both are self-hosted. Large headings use sharp negative letter spacing; technical labels open out with wide tracking.
INK#1737D1
ROYAL#47DCF4
CYAN#FF2F9B
CANOPY#F7FEFF
CLOUD
Atmosphere comes from layered CSS radial gradients, a tiny inline SVG turbulence field, translucent cloud ellipses and restrained shadows. Every aircraft, jumper, floor plan, dial and canopy is HTML, CSS or inline SVG. There are no generated assets and no external requests; that code-only constraint is part of the Velocity Wing showcase.
Reproduce this
Give an AI agent a subject with a physical variable that can become scroll progress, then demand one central transformation rather than a stack of generic cards. Specify exact states, a chromatic arc and one emotional reversal. Ask for semantic HTML, responsive behavior at phone/tablet/desktop sizes, reduced-motion support and event-driven animation.
VELOCITY WING / CODE-ONLY AIRSPACENO IMAGE ASSETS.
EVERY PIXEL EARNS ITS LIFT.