Singularity Shader for React

Singularity Shader draws a black hole as a flat, graphic picture. A thin, bright ring circles a pitch-black shadow, gold on one side and violet on the other, wrapped in a soft corona. One stream of gas curls in from the lower right along a spiral, violet far out and warming to gold as it falls toward the ring, made of fine strands that churn and stream inward while the shape itself holds still. A WGSL fragment shader on WebGPU computes it in one pass, with no 3D scene, for a fifth of a millisecond of GPU time.

Use it beside a headline in a hero, or behind a pricing or launch section: the hole sits right of center, and the left of the box stays nearly black, so copy reads there. For a 3D black hole with a churning disc and bent light, use Accretion Shader; for a tilted disc of orbiting rings of light, Cosmic Discs Shader; for a whirlpool in plain CSS, with no GPU, the Vortex background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same ring in browsers without WebGPU.

Installation

Usage

import { SingularityShader } from "@/components/ui/singularity-shader";

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

Singularity Shader is a container: your content sits on top of the black hole, 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 frame is near-black in both color schemes, so use white or light text, on the left of the box.

Demos

Small

size={0.6} shrinks the black hole and its stream, leaving more dark room around it. turbulence={1.6} tears the strands into wisps, and warmColor="#f472b6" with coolColor="#22d3ee" turn the palette to pink and cyan.

In a card

The black hole scales to fit its box, staying 58% across. size={0.8} gives it room in a small card, and intensity={1.3} brightens the glow for the smaller surface. It's light enough to keep full quality, which keeps the ring sharp.

Performance

About 0.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. It's one flat pass with six folds of sine waves per pixel, no raymarching, so it keeps full quality: the ring is a fine line that blurs at quality={0.5}. The props don't change the cost. 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 a black disc in a gold ring with a violet glow below it, 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 black hole is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the strands stream slowly and the shape never moves, at any speed. Measured over 20 seconds of frames, white text reaches 7:1 on all of the left 40% of a wide box, and 4.5:1 on 99% of the whole frame.

FAQ

Credits

Inspired by a singularity shader (opens in a new tab) by Xor on Shadertoy, a glowing ring and a wispy stream around a black core. This is a new shader written from a description of that look, not a port: the tipped disc, the single spiral stream, its strands and heating, the ring and corona, the palette and the code are ours.

API Reference