Build note · Generative Assets · №98
CONTRAIL is a fictional practice of aerial writing at altitude. The page has one job: hand the visitor a jet — the cursor — and let them feel the sky respond to being flown through. Clouds part in the wake, twin contrails widen and dissolve, and a traced path skywrites a word. Nothing is a recording; every cloud, wake and letter is computed live.
This is the eighth Wave-Four piece — the Second Person set, where the page stays inert until you drive it. Here you are the aircraft. The sky is a real, if toy, fluid: your motion pushes the air, so cloud parts and curls where you have been; your engines shed vapour that widens and fades; and follow the faint dotted guide and the vapour fills a word, letter by letter, before drifting apart. Move fast enough and the air flinches into a pale sonic cone. The mood is the opposite of an arcade — slow, high, and quiet.
Four values, argued from seven miles up: the thin blue of high air, the white of the cloud you cut, the grey it shades to underneath, and the warm light of a low sun.
Because the field is pale, the accent hues carry lines and marks only. All body text runs on a dedicated deep-slate ink (#182833) over frosted panels, with dimmer tiers for labels — so nothing small ever leans on the pale sky or the warm accent and drops below 4.5:1.
Fraunces is a soft, high-contrast serif with an optical-size axis — set large in italic it has the loose, cursive feel of skywriting, which is exactly the subject. The act of typographic bravery is the hero: a small, wide, upper-case Outfit line "YOU ARE" sitting on a giant Fraunces italic "the jet.", so a clinical grotesque and a hand-drawn serif share one sentence — the machine and the handwriting. Outfit, a clean geometric sans, does the instrument work: tabular figures for altitude, Mach, heading and the vapour counter along the bottom rail.
The hard part was making one motion do three things at once, honestly. The pointer is lerped into a smoothed jet position; its frame-to-frame delta is the velocity that (a) drives the fluid forces, (b) sets the airspeed/Mach/heading instruments, and (c) stamps the contrail. The vortex pair is what sells it: a plain push only parts cloud, but two opposite vortices trailing the wingtips leave the swirling eddies that keep turning after you have flown on — so the wake has memory. Density that heals toward a slowly-scrolling noise field means the sky is never empty and never static, yet always recovers, so the parting reads as an event and not as erosion.
The first build was a pastel wash — the clouds sat at low opacity and low contrast, so the sky looked hazy rather than cloudy, and the parting hardly showed. Firmed the base noise into banks-and-lanes and remapped cloud alpha to a steeper window (clear blue lanes below, near-solid white banks above), so now the wake reads as an event: you cut a blue gash and it heals. Strengthened the twin contrails with a bright crisp core per engine and a slower dissipation, so a fresh trail is sharp at the nose and soft behind. Pulled the sun-glow back so it stops blowing out the corner, moved the skywriting word clear of the hero copy (right of it on desktop, up in the top sky band on mobile), and enlarged the jet.
Gave the clouds volume: sun-lit tops warm toward the accent and bellies shade toward grey, both computed from the vertical density gradient. Added the jet's faint shadow cast on the cloud below it — a detail you only catch on a second look — and a rarer one: every half-minute or so, a distant jet crosses miles off, high and small, trailing its own hairline contrail. The trail also deposits a trace of real density into the fluid, so its far end genuinely dissolves into drifting cloud. Finished with a soft chime and warm bloom the moment the word completes.
Chased the collection's recurring failure — small grey text over the pale animated sky — by darkening the two secondary ink tiers until the lede, eyebrow and labels all clear 4.5:1 across the whole sky range, keeping the lightest label tier only on frosted panels. Removed the duplicated piece number from the masthead (the sky already carries it in the hero eyebrow — Chanel rule). Rebuilt the instrument rail to three columns under 720px and confirmed 375px holds with no overflow and the wordmark, nav and hero fully inside the viewport. Capped devicePixelRatio at 2, rebuild the fluid grid on resize, and pause the loop on visibilitychange. Reduced-motion skips the loop and bakes one settled frame — a scripted flight that parts the cloud, lays a contrail and skywrites the word — with audio off; touch and idle viewers get a gentle autopilot that hands back control on the first pointer move.
Adversarial QA caught a dead HUD: the altitude / airspeed / Mach / heading / vapour / skywritten rail stayed frozen at its default readout while the physics underneath ran fine (a probe showed the jet crossing Mach 1). The inline script runs the instant the parser reaches it and grabs the six getElementById handles synchronously — but the .instruments markup was authored after the script, so every handle came back null and the per-frame update bailed on its guard forever. The Mach-0.86 sonic highlight and the skywriting letter dots, sharing those same handles, were dead for the same reason. The rail is position:fixed, so moving its markup above the script fixes the load-order race without touching a pixel of layout or a line of logic. Verified headless: airspeed and Mach climb off zero as you fly, the Mach tile lights its sonic state past 0.86, all three FLY letters fill as the guide is traced, and 375px still holds with zero console errors.