Aurora 3D Shader for React

Aurora 3D Shader stands you by a still lake at night, looking up and out. Folded curtains of aurora hang in perspective across a starry sky: their lower hems are sharp and bright green, their rays rise and fade into violet, and slow ripples travel along each curtain as it folds. A thin dark shore crosses the horizon, and the lake below mirrors the lights, softened by small ripples. A WGSL fragment shader on WebGPU computes every pixel each frame: each sky ray crosses the band of altitudes where the aurora glows in 32 slices, and each slice adds the light of every curtain there. It's a ray marcher, the heavy kind of shader, so it renders at half resolution by default.

Use it behind a travel, outdoor or space hero, an expedition or a stargazing page, or a calm full-screen intro. For the flat, 2D version, a band of light drifting over black, use Aurora Shader; for themed CSS curtains with no GPU, the Aurora background; for the same calm by day, Valley Mist Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft glow of the same colors over a dark lake in browsers without WebGPU.

Installation

Usage

import { Aurora3dShader } from "@/components/ui/aurora-3d-shader";

<Aurora3dShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Chase the lights</h1>
</Aurora3dShader>

Aurora 3D 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 night is dark in both color schemes, so use white text. It reads best in the dark band of sky between the hems and the horizon, or over the lake; across the curtains themselves, keep to large headings.

Demos

Southern lights

lowColor="#ff6ad5" turns the hems pink and highColor="#4f7bff" the rays blue, like the aurora australis; the lake mirrors the new colors. curtains={3} hangs a third curtain behind the first two, for a fuller sky.

In a card

In a small box, height={0.3} lowers the curtains toward the horizon, so their hems and the reflection both fit, and intensity={1.3} brightens them for the smaller surface.

Performance

Aurora 3D Shader renders at quality={0.5} by default: half the screen's resolution, a quarter of the pixels. On an M2 Max laptop at 1280×720, a frame takes about 2.3 ms of GPU time at that default, and about 4.5 ms at quality={1}. Slower GPUs take several times longer, so keep the default on large screens; the light is soft, so half resolution hardly shows. Your own quality prop overrides it. 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 still: a soft glow of the hem and ray colors over the sky, and a darker lake below the horizon, built from the same 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 of the curtains and stops. Nothing flashes: the folds ripple over seconds, and the stars only swell and fade gently over several. White text stays above 17:1 on 95% of the dark sky between the hems and the horizon, and above 6:1 everywhere on the lake. Over the curtains it falls to about 1.4:1 on the brightest hems, so put body text below them, or on a bg-black/50 panel, which keeps it above 5:1.

FAQ

API Reference