Cosmic Waves Shader for React

Cosmic Waves Shader fills its box with one large, soft glow that slowly changes color. Three sine waves interfere with a layer of fractal noise to make a swirling pattern, and the pattern picks each pixel's place on a loop of four colors, blue to violet to cyan to pink and back, so bands of color sweep through the glow as the loop turns. Two layers of small stars drift and twinkle in front, and a round vignette takes the corners to black. A WGSL fragment shader on WebGPU computes every pixel each frame, for about a quarter of a millisecond of GPU time.

Use it behind a dark hero, a pricing or launch section, or anywhere a glow should carry your brand's colors: all four loop colors and the center glow are props. For drifting clouds in one tint instead, use Nebula Shader; for bands of light, Aurora Shader; for a CSS backdrop with no GPU, the Nebula background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same colors in browsers without WebGPU.

Installation

Usage

import { CosmicWavesShader } from "@/components/ui/cosmic-waves-shader";

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

Cosmic Waves Shader is a container: your content sits on top of the glow, 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 glow is dark around the edges and moderately bright in the middle, in both color schemes, so put white or light text over it, large in the middle or on a panel such as bg-black/40.

Demos

Brand colors

colorSpeed={0} stops the loop, so the glow holds the part of it around firstColor, blended toward secondColor and fourthColor where the waves rise and fall; thirdColor hardly shows. Here a violet glow swirls into pink and cyan.

In a card

The glow scales with its box. amplitude={0.6} calms the swirls into a smoother glow, and stars={1.4} packs in more, smaller stars.

Performance

About 0.26 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The props don't change the cost. The glow is soft, so quality={0.5} renders a quarter of the pixels and looks nearly the same; only the stars get coarser. 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 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 soft teal, blue and pink glows on dark navy, 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 glow is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, a cyan and pink glow, and stops. Nothing flashes: the colors loop once every 10 seconds at the default colorSpeed, and each star fades in and out over about three seconds. Across 18 frames over 23 seconds, white text reaches 4.5:1 on 95% of the shader, but on only 81% of the middle, where the glow is brightest; it stays above 3:1 on 94% of the middle. So a large white headline reads there, and small text needs a panel.

FAQ

API Reference