Incense Shader for React

Incense Shader draws a thread of smoke rising from a stick below the box. For the first third it's perfectly smooth and straight; then waves start to travel up it, grow, fold into curls and finally open into a soft veil that fades near the top. Two fainter, out-of-focus threads drift behind it. A WGSL fragment shader on WebGPU computes every pixel each frame: each thread is a center line of three travelling sine waves, bent by simplex noise once it turns turbulent, and drawn as a soft line that widens and thins as it climbs.

Use it beside the headline of a spa, tea, fragrance or wellness page, or anywhere one quiet motion suits better than a full-screen effect. The thread rises at 70% of the width by default, leaving the left side calm for copy. For broad plumes that fill the bottom of the box, use Smoke Shader; for paper marbling on a light ground, Marbling Shader; for CSS puffs that follow your theme, the Smoke background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft gradient of the thread in browsers without WebGPU.

Installation

Usage

import { IncenseShader } from "@/components/ui/incense-shader";

<IncenseShader className="flex min-h-[32rem] items-center px-12">
  <h1 className="max-w-sm text-5xl font-semibold text-white">Slow down</h1>
</IncenseShader>

Incense 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 ground is charcoal in both color schemes, so use white or light text, on the side away from the thread: origin moves the thread, so set it to 0.3 for copy on the right.

Demos

On a light page

backgroundColor and smokeColor recolor the ground and the smoke: here slate smoke on warm paper. The smoke blends between the two, so any pair works, light on dark or dark on light.

In a card

origin={0.5} raises the thread up the middle of the card, and threads={1} drops the two behind it, so a narrow box shows one clean line.

Performance

About 0.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Pixels too far from a thread for it to reach skip it, so the empty side of the box costs almost nothing. It keeps full quality: the thread's base is only a couple of CSS pixels wide, and half resolution would blur it. 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 a thread and its veil, 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, the thread rising into its first curls, and stops. Nothing flashes: the waves travel up the thread over seconds. White text reads above 14:1 on the half of the box away from the thread at the default origin; keep text off the thread itself, where the contrast drops.

FAQ

API Reference