Fire 3D Shader for React

Fire 3D Shader draws one flame, the way a camera would see a real one: it rises from a small blue root near the bottom of the box, swells into a yellow-white heart, and tapers to a tip that twists, leans and tears into thin, swirling licks of orange and red, with a warm glow on the dark around it. The flame is a volume, not a picture. For every pixel, a WGSL fragment shader on WebGPU sends a ray through a twisting, teardrop-shaped sheet of fire that five layers of turbulence fold over on itself, and adds up light wherever the ray passes close to it: where it grazes a fold, a bright lick appears.

Use it at the center of a dark hero, a launch or "hot right now" section, a game or a candle-lit brand. The flame takes the middle third of the box, so put your copy to the sides or above it. For a bed of coals with no flame, use Embers Shader; for a low wall of fire with sparks rising, Sparks Drifting Shader; for lava, Magma 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 a soft CSS flame in browsers without WebGPU.

Installation

Usage

import { Fire3dShader } from "@/components/ui/fire-3d-shader";

<Fire3dShader className="flex min-h-[32rem] items-start justify-center pt-10">
  <h1 className="text-5xl font-semibold text-white">Ignite</h1>
</Fire3dShader>

Fire 3D Shader is a container: your content sits on top of the flame, 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 put white or light text on it, above the flame's tip or to either side.

Demos

Spirit flame

The flame's colors are props: flameColor="#22a6ff" turns its body blue, coreColor="#e6fbff" its heart icy white, and baseColor="#a855f7" its root violet. turbulence={1.3} makes it wilder, with more licks near the tip.

In a card

The flame is sized to the box's height, so it keeps its shape in a card. height={0.9} lets it fill more of a short box, and turbulence={0.7} calms it toward a steady, candle-like flame.

Performance

About 2 ms of GPU time a frame at 1280×720 on an M2 Max laptop, measured between 1.7 and 3 ms; slower GPUs take several times longer. Only the middle of the box, where the flame can reach, is ray marched: 40 steps of five turbulence layers per pixel. The licks are fine lines, so it renders at full resolution by default; quality={0.5} costs a quarter as much and softens them into a glow. 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 flame: a soft ellipse in the core and flame colors, a touch of the root color under it, and the background color around it, 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 flame is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, two and a half seconds in, and stops. Nothing flashes: the flame sways and its licks swirl, but its brightness doesn't jump. White text stays above 18:1 on the outer thirds of the box and on the top fifth, across every frame we measured; over the whole box it reaches 4.5:1 on 94%, so keep text off the flame itself.

FAQ

Credits

Inspired by a fire shader (opens in a new tab) by Xor on Shadertoy, through shadcn.io's Fire 3D. This is a new shader written from a description of the technique, not a port: a ray marched through turbulent fire that gathers light near a hollow shape. The flame's shape, its blue root, the twist, the turbulence, the coloring, the props and the code are ours.

API Reference