Plasma Shader for React

Plasma Shader draws the classic demoscene plasma on the GPU. Four waves of sines and cosines interfere: one along the axes, one across the diagonals, one in rings round the center and one in six spokes, which leave a pinwheel in the middle. Their sum becomes a color through three sines 120 degrees apart, so the field fills with soft round blobs in neon green, cyan, blue and violet, with yellow and orange hot spots, and the whole mapping turns through the spectrum every 12.6 seconds. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, for about 0.1 ms of GPU time a frame, the lightest shader in the set.

Use it behind a retro hero, a music release, a club night or a game jam page, where the background is part of the show. For the same idea in plain CSS, calmer and in pastel or jewel tones, use the Plasma background; for big, slow color lights, Gradient Mesh Shader; for organic fractal color, Noise Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows CSS rings of the same colors in browsers without WebGPU.

Installation

Usage

import { PlasmaShader } from "@/components/ui/plasma-shader";

<PlasmaShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="rounded-2xl bg-white/40 px-6 py-3 text-5xl font-semibold text-black">
    Turn it up
  </h1>
</PlasmaShader>

Plasma Shader is a container: your content sits on top of the plasma, 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 colors are bright in both color schemes, so black text reads best on them, and the busy pattern needs a panel behind body text, such as bg-white/40.

Demos

Rings

bands={3} spreads each wave across three times as many colors, so the blobs turn into tight rainbow rings, and scale={0.5} doubles their size. speed={0.6} slows it to suit the bigger shapes.

In a card

saturation={0.6} softens the colors, and speed={0.4} calms the motion for a small surface that sits next to text. quality={0.5} renders at half resolution: the blobs are soft, so you can't tell, and the GPU does a quarter of the work.

Performance

About 0.1 ms of GPU time a frame at 1280×720 on an M2 Max laptop: about 10 trigonometric calls a pixel, with no loops or textures. Slower GPUs take several times longer, and quality={0.5} renders a quarter of the pixels. 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 CSS rings of the same greens, cyans and blues, 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 plasma is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, green, cyan, blue and violet blobs round the pinwheel, and stops. Nothing flashes: every color changes along smooth waves, though the motion is brisk, so prefer speed below 1 next to long reading. Over a dozen moments, black text on the bare plasma stays above 3.6:1, enough only for large headings; on a bg-white/40 panel it stays above 7:1. White text needs bg-black/60 to stay above 6.5:1.

FAQ

API Reference