Accretion Shader for React

Accretion Shader draws a black hole seen from just above its disc. Hot gas orbits a black shadow, white-gold at the inner edge and orange-red further out, churning in torn streaks that wind tighter near the hole, where it orbits faster. The hole bends light, so the far side of the disc shows up twice more: arched over the top of the shadow and as a thin ring beneath it. The side of the disc turning toward you is brighter. A WGSL fragment shader on WebGPU traces each pixel's ray through the glowing gas, bending it toward the hole at every step.

Use it as the centerpiece of a space, science or launch hero, with the headline above or below the hole, where the frame stays dark. For a flatter, quieter black hole, use Singularity 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 gradient of the same colors in browsers without WebGPU.

Installation

Usage

import { AccretionShader } from "@/components/ui/accretion-shader";

<AccretionShader className="flex min-h-[32rem] flex-col justify-end pb-10 text-center">
  <h1 className="text-5xl font-semibold text-white">Beyond the horizon</h1>
</AccretionShader>

Accretion 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 hole sits in the middle and the disc runs across it, so put white or light text in the dark band above or below, in both color schemes.

Demos

Calm

turbulence={0.2} smooths the gas into long, even streaks, and tilt={0.15} lowers the view toward the disc's edge, so the arch over the hole stands taller. innerColor="#e6f4ff" and outerColor="#3b82f6" cool it to a blue-white glow.

In a card

The black hole scales to fit its box. tilt={0.45} looks down on the disc a little more, so its gas fills more of a small surface, and quality={0.5} renders a quarter of the pixels, which the soft glow hides.

Performance

About 1.7 ms of GPU time a frame at 1280×720 at its default quality of 0.75, on an M2 Max laptop (2.4 ms at full resolution, 0.85 ms at quality={0.5}); slower GPUs take several times longer. Each pixel's ray takes up to 96 steps, and the steps inside the disc each read the gas twice, so it renders at three-quarter resolution unless you set quality. The glow is soft, so quality={0.5} looks nearly the same; only the thin rings near the hole soften. 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 over an orange band, 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 gas churns and streams over seconds. Measured over 20 seconds of frames in a wide box, white text reaches 7:1 on nearly all of the top and bottom fifths, and 4.5:1 on 95% of the whole frame; keep text off the disc and the ring.

FAQ

Credits

Inspired by an accretion disc shader (opens in a new tab) by Xor on Shadertoy, a churning, glowing black hole. This is a new shader written from a description of that look, not a port: the bent-ray march, the orbiting gas, the lit side, the palette and the code are ours. The light bending uses the standard approximation for light near a black hole, a force of 1.5 h²/r⁵ toward it.

API Reference