Cassiopeia renders a supernova remnant in real time — a filamentary shockwave shell expanding from a collapsed core, cooling as it grows. It is a single WebGL fragment shader over a black sky, with live telemetry reading expansion velocity and years since the star tore itself apart. The page's one job: make three centuries of aftermath watchable in seconds.
Everything on screen is one full-screen fragment shader — no library, no textures. Each pixel treats the remnant as a thin, expanding sphere seen flat. For a pixel at distance d from the core, the shader solves where the line of sight pierces that sphere of radius R: two intersections, a near cap and a far cap.
Three physical facts do the art direction. Limb brightening — near the rim the sightline grazes the shell and passes through more glowing gas, so R/z spikes and the edge burns brightest. Doppler — the near cap approaches and tints blue-cyan, the far cap recedes and tints magenta, while the sideways-moving limb keeps its true hot white. Cooling — the shell's radius grows as R = age^0.42 (a decelerating Sedov expansion), brightness falls, and the whole palette slides warmer as it ages. Filaments are 3D value-noise sampled on the sphere's surface, so the lace moves with the shell instead of sliding across it.
Two shells run half a period apart so a shockwave is always mid-flight — the sky is never blank, and the resting state at load already shows a shell roughly two-thirds grown. The telemetry follows one canonical epoch, resetting each loop.
Argued from the physics of shocked gas, not from taste: hot approaching gas is blue, receding gas red, and the void behind is very nearly black.
A geometric sans with a slightly astronomical, technical feel — tight at 800 for the wordmark, calm at 400 for prose. The negative tracking on the headline lets it read as a single mass, like a name stamped on a chart.
Tabular figures for the live readouts so digits don't jitter as velocity and temperature update. Every eyebrow, label and unit is monospaced — the instrument voice against Sora's editorial one.
Raw WebGL, one full-screen triangle, one fragment shader. Value-noise fBm builds the filaments; an analytic ray-sphere intersection gives the near/far caps and the limb; a tone-map (1 − exp(−c)) keeps the hot core from clipping. Device-pixel-ratio is capped at 2, the canvas resizes with the window, the rAF loop pauses on document.hidden (with a clock shift so it resumes without a jump), and a lost WebGL context drops to a CSS radial-gradient fallback. Telemetry is derived in JS from the same expansion law the shader draws.
First render had a hard-edged ring with no depth. Added the second (far-cap) contribution and limb brightening, which gave the shell volume instead of a decal. Tuned the type scale — headline to clamp(52px,13vw,148px), telemetry to tabular numerals — and found the spec's remnant-purple (#8A5A9E) failed contrast as body text (~3.9:1 on the void); split it into a decorative line token and introduced #E6DDF2 / #B7A2CE for type.
Enriched the signature: filaments now sample noise on the 3D surface point so they cool and drift with the shell rather than scrolling. Added the persistent collapsed core (a bright point + tight glow) and a faint outer nebular halo. Second-read detail — two shockwaves offset half a period, so on a second visit you notice an older, fainter shell trailing the bright one. Drove the animation and confirmed velocity falling from ~6,500 to ~2,400 km/s as the shell decelerates.
Checked 375px: nav, wordmark and telemetry grid stay within the viewport; alternating notes collapse to a single left-aligned rail. Verified prefers-reduced-motion renders one settled mid-flight frame with static readouts and no rAF. Confirmed focus-visible rings, DPR cap, resize, and hidden-tab pause. Removed one excess ornament (a rotating outer scan-line) that competed with the shell — the Chanel rule.