Cosmic Discs Shader for React

Cosmic Discs Shader draws a flat disc of light seen at an angle. Dozens of thin concentric rings are each broken into a few glowing arcs, like comets with a bright head and a fading tail, and every ring orbits the center at its own pace, the inner ones faster, as in a real orbiting disc. The rings shade from gold at the center through pink to blue at the rim, with a soft halo around each lit arc, on near-black. A WGSL fragment shader on WebGPU traces each pixel's ray onto the tipped disc, so the perspective is real: the near side's rings are wider apart than the far side's.

Use it beside a headline in a hero, behind a music, event or launch page, or in a product intro: the disc sits right of center in wide boxes, leaving room on the left for copy, and centers itself in narrow ones. For a black hole's ring of fire instead, use Accretion Shader or Singularity Shader; for planets on orbits in plain CSS, with no GPU, the Orbits background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same rings in browsers without WebGPU.

Installation

Usage

import { CosmicDiscsShader } from "@/components/ui/cosmic-discs-shader";

<CosmicDiscsShader className="flex min-h-[32rem] items-center">
  <h1 className="max-w-xs px-10 text-5xl font-semibold text-white">
    Ship faster
  </h1>
</CosmicDiscsShader>

Cosmic Discs Shader is a container: your content sits on top of the disc, 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 background is near-black in both color schemes, so use white or light text, on the left third of a wide box, where the disc doesn't reach.

Demos

Monochrome

innerColor, middleColor and outerColor set the three colors the rings shade through, from the center out; here white fades to cyan. rings={14} spaces the rings out, arcLength={0.35} shortens the arcs into sparks, tilt={0.8} tips the disc nearly edge-on, and intensity={1.5} makes up for the thinner lines.

In a card

In a narrow box the disc centers itself and shrinks to fit. tilt={0.25} turns it almost to face you, like a record, and rings={20} keeps the arcs legible at the smaller size.

Performance

About 1.6 ms of GPU time a frame at 1280×720 on an M2 Max laptop with the default 28 rings (1.3 ms median); slower GPUs take several times longer. The cost grows with rings. The rings are fine lines, so it keeps full quality; quality={0.5} renders a quarter of the pixels but softens the lines. 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 rings in the same three colors, 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 disc 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 disc and stops. Nothing flashes: the arcs glide along their rings, and an arc passes any one point at most about 0.7 times a second at the default speed. White text reaches 4.5:1 on 99.8% of the left third of a wide box, measured over 20 seconds of frames, and on 93% of the disc itself, where the bright arcs cross it; keep text off the disc, or put it on a panel.

FAQ

Credits

Inspired by a cosmic discs shader (opens in a new tab) by Xor on Shadertoy, a tilted disc of spinning, glowing arcs. This is a new shader written from a description of that look, not a port: the ray–disc projection, the orbit speeds, the comet-shaped arcs and their halos, the palette and the code are ours. The hash is lowbias32 by Chris Wellons, in the public domain.

API Reference