Drawing a wall that is only pressure.

Transonic renders the one moment aeronautics spent decades fearing: a body meeting the speed of its own sound. The page's single job is to make an invisible pressure field legible — pile-up, collar, cone — for anyone who has heard of the sound barrier but never seen its shape. Fictional subject; real physics; one shader.

Concept

Sound is how a fluid passes news of a disturbance. Move faster than the news and the air ahead cannot get out of the way — pressure stacks into a shock. Below Mach 1 the disturbance runs ahead as a detached bow shock; at the crossing, air expanding over the body cools past its dew point and a condensation collar flashes; beyond it, every ripple is trapped inside a trailing Mach cone of half-angle μ = arcsin(1/M). The whole field is unseeable in ordinary light, so we borrow the lab's trick: Schlieren, which paints the gradient of air density itself.

Palette — argued from the field

High-sky

#1A2A3A

The thin blue-grey of the stratosphere where the barrier is broken — the ground the whole scene sits on.

Shock line / mark

#E8EDF2

Near-white for the shock lines only — a density discontinuity reads as a hard bright edge. Never used for body text.

Vapour collar

#BCD4E0

The cool blue-white of condensation — reserved for the transonic flash and for interactive accents.

Haze-ink (body)

#CFD8E1

Derived legible ink — 10.1:1 on the sky ground — so copy never sits in the bright line colour.

Per the collection's ink/line rule, the bright #E8EDF2 is a LINE token; small text uses the derived #CFD8E1 (and #93A3B2 at 5.7:1 for secondary), both comfortably above 4.5:1, with a gradient scrim behind hero text so the moving shocks can never wash it out.

Type

Display — Archivo 900

Mach 1

A grotesque with engineered, aeronautical proportions. Set at 900 weight, negative tracking, tight leading — the headline should feel machined, like fuselage stencil.

Mono — Space Mono 700

33.7° μ

The instrument voice: throttle readout, Mach angle, dynamic pressure. Tabular figures so the numbers tick without the layout twitching.

Technique — the signature

One full-viewport fragment shader (raw WebGL, a single fullscreen triangle — no library) computes the whole field per pixel. The body is an analytic ogive silhouette with a swept dorsal fin and pitot needle. Around it, four density structures are summed:

Mach cone. From the nose, the perpendicular distance to the cone surface is perp − along·tan μ; a tight Gaussian on that zero-set draws the shock line, gated on M ≥ 1. A fainter inner shocklet at 0.84·tan μ adds the second-read Schlieren texture. Bow shock. A forward-bulging parabola ahead of the nose, its intensity a Gaussian in Mach centred on 1.0, so it detaches and stands off only through the transonic band. Condensation collar. A soft vertical band hugging the body, its brightness peaking sharply at M ≈ 0.99 then vanishing — the flash. Wake. Scrolling fbm turbulence behind the body gives the knife-edge density shimmer that keeps the frame alive even at steady cruise.

A JavaScript throttle eases a Mach value into the shader each frame; the Mach angle, dynamic pressure and collar state are computed in parallel for the readout. On load the body auto-accelerates from 0.7 through the barrier and settles into supersonic cruise — so a static 7-second capture always shows a clean, steady cone rather than an empty sky.

Iteration log

Pass 1 · Craft

Rhythm, contrast, honesty of the physics

Set the derived haze-ink (#CFD8E1, 10.1:1) and a 5.7:1 secondary against the sky ground; added top/bottom gradient scrims so shock lines sweeping under the hero copy can't drop it below 4.5:1.
Cut the type scale to a deliberate ramp (eyebrow 11px → lede 18px → h1 116px) and balanced the headline wrap so "air" lands alone as the emphasis word.
Fixed the Mach-cone geometry so the apex sits exactly at the nose and the half-angle narrows visibly as speed rises — the readout's μ now matches the drawn angle.

Pass 2 · Depth

Enrich the field, add a second read

Added the faint inner shocklet inside the main cone and scrolling wake turbulence — on a second visit the cone is clearly two lines and the air behind the body shimmers.
Tightened the condensation collar from a full curtain to a bounded collar around the fuselage, and tuned its Mach peak to fire just under M 1.0.
Micro-interaction: the large Mach readout warms from shock-white to vapour-blue while crossing the transonic band, echoing the collar on screen.

Pass 3 · Hardening

375px, reduced motion, resilience

Reworked the mobile HUD to stack, strengthened the scrims at ≤640px so the bright diagonal shocks never obscure the lede, and confirmed nav and wordmark stay inside the 375 viewport.
Reduced-motion path renders a single static frame at supersonic cruise (steady cone, never blank); rAF is guarded by a matchMedia check and paused on document.hidden.
WebGL context-loss and init-failure both fall back to a static SVG shock-cone scene; DPR is capped at 2 and the canvas resizes to its container. Removed a redundant sky ornament to keep the density read clean (Chanel rule).

Sapience Analytics builds bespoke generative and data-driven interfaces like this one.

Commission a piece