MIRAGE renders a thing that has no body: the refractive-index gradient that stands in the first few centimetres of air above a hot road. Cool it and warm it and the light bends — the sky spills downward and pools as water that was never there.
The brand is a fictional cinematographer's title card for the invisible. Its single job is to hold a viewer for seven silent seconds while the horizon breathes, then hand them a live instrument that names the temperature, the refractive slope, and the distance at which the false water begins.
Palette
Sun-bleached, argued from the heat
Every value comes from a road at noon: a bleached bone ground, a sky drained to slate, and one cool refraction blue reserved strictly for lines and marks — never for body copy, which is why the text ink is derived separately.
Type
A serif that shimmers
Fraunces — display
Fraunces at its lightest weight and largest optical size gives a wide, sun-warmed serif with real old-style contrast — a title card, not a UI label. It is the one place the site risks boldness: the H1 is fed through an animated SVG feTurbulence + feDisplacementMap so the letters themselves wobble in the heat, exactly like the horizon behind them.
IBM Plex Mono — readouts
The instrument speaks in IBM Plex Mono with tabular figures, so the temperature and the false-water distance tick without the numbers dancing. The mono also carries every eyebrow and the colophon — the measured, technical voice against the serif's heat.
Technique
Bending light in a fragment shader
The desert is entirely procedural — no photograph anywhere. A single full-screen WebGL fragment shader paints the sky gradient, the receding asphalt trapezoid with its perspective-spaced centre dashes, and the bleached sand, all as functions of screen position.
The signature is a vertical refraction remap. Near and below the horizon a heat-haze turbulence field (layered value-noise fbm, scrolling upward) displaces the sampling coordinate. Where the displaced coordinate crosses back above the horizon, the shader samples the sky instead of the ground — the inversion that makes the road appear to hold water. A second term pools a silvery reflection of the sky downward from the horizon to a waterline whose depth grows with the heat, and a soft shoreline glows where the false water ends. The whole field rises and falls on a slow sine — the breathing of the thermal gradient.
The same heat value drives the on-page instrument: surface temperature, refractive slope Δn/Δz, false-water onset distance and shimmer rate are all derived from it in JavaScript, so the numbers and the picture are reading the one invisible field. Device-pixel-ratio is capped at 2, the canvas sizes to its container and handles resize, the loop pauses on document.hidden, a lost WebGL context falls back to a static CSS horizon, and prefers-reduced-motion renders one settled frame — the mirage already pooled, motionless.
Process
Three passes
Contrast & the ink split
The highlighted phrase in the lede was set in the refraction blue (#8FB8C8) and sat on the pale haze at roughly 3:1 — the exact mark-as-body trap the playbook warns against. Re-set it as italic bone-ink for guaranteed legibility and deepened the lede text-shadow. Confirmed the asphalt-ink instrument card and the derived bone-ink both clear 4.5:1 on their grounds.
Making the false water read as water
At first the road merely faded into haze — the signature was too shy. Drove the shader across a full heat cycle and enriched the pool: a silvery-blue tint toward the false shore, stronger specular glints, a glowing shoreline where the water ends, and a deeper waterline at peak heat. The road now visibly dissolves into standing water. Softened the title's heat-warp so it shimmers rather than tears.
375px, reduced motion, one ornament removed
Verified headless at 1440 and 375: no overflow, one <h1>, zero console errors, and a passive two-frame hash diff proving the shimmer advances on its own. Reduced-motion renders a premium settled horizon rather than a blank. Applied the Chanel rule — the site number was printed twice (header and eyebrow), so it was dropped from the header — and kept the mobile wordmark legible with tighter tracking instead of hiding it.
Elsewhere