Mirage Shader for React

Mirage Shader paints a flat desert horizon at dusk, from a violet sky overhead to peach at the horizon, with a low sun and a few far mesas. Just above the ground the air shimmers: rising, noisy hot air bends every lookup up and down, so the horizon, the mesas and the sun's lower edge wobble and stretch. Below the horizon an inferior mirage turns the ground into a trembling "lake" that mirrors the sky, the mesas and the sun, and its far edge wanders as the hot layer thickens and thins. The scene is drawn analytically and the haze is fractal noise drifting upward; a WGSL fragment shader on WebGPU draws every pixel each frame.

Use it behind a travel, hotel, festival or outdoor-gear hero, or anywhere a warm, calm landscape fits. For mist in hills instead, use Valley Mist Shader; for warm light through cloud, Cloud Rays Shader; for sand ridges in plain CSS, the Dunes background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same sky and sun in browsers without WebGPU.

Installation

Usage

import { MirageShader } from "@/components/ui/mirage-shader";

<MirageShader className="flex min-h-[32rem] flex-col items-center pt-24">
  <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
</MirageShader>

Mirage Shader is a container: your content sits on top of the scene, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The sky is dark at the top and light at the horizon, so place text by height: white text in the top third stays above 4:1 (6:1 at the median), fine for a headline, and dark text on the ground below stays above 5:1. Around the sun and the horizon neither reads well. The palette is the same in both color schemes.

Demos

Midday road

The colors make the place. skyColor="#9fc6e8" and zenithColor="#3d6db0" give a clear blue sky, groundColor="#4a4a4f" turns the desert into asphalt, silhouetteColor="#6b6f78" grays the far hills and sunColor="#ffffff" whitens the sun: the mirage now reads as the wet-looking patch over a hot road.

In a card

horizon={0.55} raises the horizon a little, so a tall card shows more ground and its mirage. The haze scales with the box's height, so the wobbles keep their size.

Performance

About 0.7 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The scene is drawn twice, once for the mirror, plus a few noise lookups for the haze. The edges are soft, so quality={0.5}, a quarter of the pixels, looks almost the same on a large screen. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS gradient of the same sky, sun and ground, which follows your color props, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The scene is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, the sun on the horizon beside the mesas with their mirage below, and stops. Nothing flashes: the shimmer is small and slow, and only the narrow band round the horizon moves. White text reads in the top third of the frame; dark text on the ground.

FAQ

API Reference