Magma Shader for React

Magma Shader draws a river of lava seen from above. Black crust plates drift down the frame, each one wandering a little on its own, so neighbours grind past each other and the seams between them open and close. The seams glow from deep red to orange-yellow, hottest and widest where the plates pull apart, and a few plates have split across the middle, showing a thinner, cooler crack. The plates are Voronoi cells with ragged, noise-warped borders, and the glow's color is black-body light, worked out from Planck's law for each seam's temperature, by a WGSL fragment shader on WebGPU for every pixel, every frame.

Use it behind a gaming or launch hero, a product drop, or a dark section that should feel hot without moving fast. Most of the frame is dark crust, so a headline sits easily on it. For flame rather than molten rock, use Fire 3D Shader; for a bed of coals breathing in the dark, Embers Shader; for a page edge that burns in, Burning Paper Shader; and for a fire in plain CSS, with no GPU, the Fireplace background. It runs only while it's on screen, holds a still frame with reduced motion, and shows dark crust with two glowing seams in browsers without WebGPU.

Installation

Usage

import { MagmaShader } from "@/components/ui/magma-shader";

<MagmaShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Forged in fire</h1>
</MagmaShader>

Magma Shader is a container: your content sits on top of the lava, 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 crust is near black in both color schemes, so put white or light text over it.

Demos

Cooling

temperature={900} cools the seams to a dull red, cracks={0.3} narrows them and splits fewer plates, and flow={0.5} slows the river to half pace, for a calmer, darker surface.

In a card

The plates are sized to the box's height, so a card shows as many rows of them as a hero, only smaller. cracks={0.8} widens the seams and splits more plates, so the small surface still glows.

Performance

About 1.4 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The seams are thin, sharp lines, so it renders at full resolution by default: quality={0.5} costs a quarter as much, but softens them. 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 a CSS gradient in the crust color with two faint glowing seams, 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 lava is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, four seconds in, and stops. Nothing flashes: the plates drift and the heat breathes over seconds. White text reaches 4.5:1 on 98% of the default frame, and more than 16:1 on 95% of it; only the brightest seams fall below. Keep small body text off them, or raise cracks and intensity only where there's no text.

FAQ

API Reference