Embers Shader for React

Embers Shader draws a bed of coals seen from above at a slant, the way you'd look down into a fire pit. Each lump of charcoal is rounded and lit from above; some are hot right through and glow a mottled orange, others are nearly dead, dark under grey ash with red cracks across them, and the gaps between them glow brightest at the heart of the bed, low in the middle. The heat swells and sinks through the bed in slow waves, as if someone were blowing on it, and now and then a spark lifts and winks out. The coals are Voronoi cells projected onto a tilted ground, the cracks a second, finer cell pattern, and the glow is black-body light from Planck's law, computed for every pixel, every frame, by a WGSL fragment shader on WebGPU.

Use it behind a cosy product, a winter or holiday page, a "fireside" story or an after-dark hero. The bed fades into darkness toward the top, which leaves room for a headline. For a river of lava with drifting plates, use Magma Shader; for open flame, Fire 3D Shader or Sparks Drifting Shader; 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 a warm glow over dark in browsers without WebGPU.

Installation

Usage

import { EmbersShader } from "@/components/ui/embers-shader";

<EmbersShader className="flex min-h-[32rem] items-start justify-center pt-24">
  <h1 className="text-5xl font-semibold text-white">Gather round</h1>
</EmbersShader>

Embers Shader is a container: your content sits on top of the coals, 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 bed is dark in both color schemes and brightest low in the middle, so put white or light text in the upper half.

Demos

Dying fire

temperature={900} cools the bed to a dull red, ash={0.8} coats more of each coal in grey, breathing={0.5} calms the swell, and sparks={0.1} sends up only the odd spark: a fire that's nearly out.

In a card

The bed is sized to the box's height, so a card shows the same few rows of coals, closer up. intensity={1.3} brightens the glow for the small surface, and sparks={0.8} sends up more sparks.

Performance

About 1.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The cracks are fine 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, an orange glow at the bottom fading to near black at the top, 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 coals are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame, three seconds in, and stops. Nothing flashes: the heat swells over several seconds, and the sparks are a few pixels wide. In the upper 45% of the frame, white text reaches 4.5:1 everywhere we measured but the sparks themselves; over the whole frame it's 4.5:1 on 96%, so keep text off the bright heart at the bottom.

FAQ

API Reference