Smoke Shader for React

Smoke Shader draws plumes of smoke on the GPU. Two soft grey columns rise from the bottom edge, with a third at the right, each widening as it climbs, swaying side to side and gone by about the middle of the box. Layers of fractal noise churn inside them, a faint haze drifts in the upper half, and a warm tint and a soft diagonal light catch the smoke near its base. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, so the texture keeps rolling upward in a way CSS can't.

Use it behind a dark hero, an event or music page, or a section that should feel smoky and slow. The upper half stays dark and calm, so copy sits there. For the same idea in plain CSS, with puffs that follow your theme, use the Smoke background; for one thin thread of smoke that curls, Incense Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same plumes in browsers without WebGPU.

Installation

Usage

import { SmokeShader } from "@/components/ui/smoke-shader";

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

Smoke Shader is a container: your content sits on top of the smoke, 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 backdrop is near-black in both color schemes, so use white or light text, and keep it in the upper half, where the smoke has thinned.

Demos

On a light page

backgroundColor sets the backdrop and smokeColor the smoke; denser smoke shades darker from it. Here a dark grey on zinc gives charcoal smoke on a light page, and density={0.8} thins it so the plumes stay soft instead of sooty.

In a card

The plumes scale with their box. density={1.3} thickens them and height={1.2} lets them climb and spread further, so they fill a small, tall surface.

Performance

About 1.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel skips the plumes it's outside of, so the dark upper corners cost little. The smoke is soft, so quality={0.5} renders a quarter of the pixels and looks nearly the same, on a slow GPU or a large screen. 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 of the same plumes, in your smokeColor and backgroundColor, 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 smoke is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the plumes and stops. Nothing flashes: the smoke drifts and rolls over seconds. White text reads above 13:1 everywhere in the upper half, and stays above 4.5:1 even over the brightest smoke at the bottom, so large text is safe anywhere and body text belongs up top.

FAQ

API Reference