Aurora Shader for React

Aurora Shader draws the northern lights on the GPU. Three layers of fractal noise drift sideways inside bands that sway on two slow sine waves, tinted green at the bottom, through blue and violet, to cyan at the top, over black. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, so the light folds and shimmers in ways CSS can't, for about half a millisecond of GPU time a frame.

Use it behind a dark hero, a launch page or a full-screen intro. For the same idea in plain CSS, with no GPU and themed colors, use the Aurora background; for cosmic clouds instead of bands, Nebula Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft gradient of the same colors in browsers without WebGPU.

Installation

Usage

import { AuroraShader } from "@/components/ui/aurora-shader";

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

Aurora Shader is a container: your content sits on top of the light, 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 light is always on black, so put white or light text over it, in both color schemes.

Demos

Vivid

vibrancy={1.6} saturates the colors, frequency={1.4} packs the folds tighter, stretch={1.8} thins the band toward the middle, and speed={0.6} slows the drift.

In a card

The light scales with its box. intensity={1.4} brightens it for a small surface, and quality={0.5} renders at half resolution: the bands are soft, so you can't tell, and the GPU does a quarter of the work.

Performance

About 0.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop, and a quarter of that at quality={0.5}; slower GPUs take several times longer. 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 colors, 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 light 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 lights and stops. Nothing flashes: the bands brighten and fade over seconds. White text reads best on the black above and below the band; keep small body text off the brightest part of the band, especially at intensity above 1.

FAQ

API Reference