Burning Paper Shader for React

Burning Paper Shader draws a sheet of cream paper whose edges are on fire. A thin front, white-yellow at its leading edge and orange to deep red behind, runs all the way round the sheet along a ragged line; it creeps slowly in and out, browns the paper just ahead of it, and leaves black char behind, flecked with grey ash and a few glowing specks. Now and then an ember leaves the front and rises a little way before it burns out. The front is a rounded frame roughened by noise, its glow is black-body light from Planck's law, and a WGSL fragment shader on WebGPU computes every pixel, every frame. The middle of the sheet stays clean.

Use it behind a Halloween or limited-time offer, a story's opening, or any hero that wants its message on a page that's going up in flames. It's one of the few light shaders: dark text sits in the middle of the sheet. For plain paper in CSS, with no GPU and no fire, use the Paper background; for heat that fills the whole frame, Magma Shader or Embers Shader; for open flame, Fire 3D Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS frame of paper, glow and char in browsers without WebGPU.

Installation

Usage

import {
  BurningPaperShader,
} from "@/components/ui/burning-paper-shader";

<BurningPaperShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-stone-950">Last chance</h1>
</BurningPaperShader>

Burning Paper Shader is a container: your content sits on top of the paper, 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 paper is cream in both color schemes, so put dark text over it, such as text-stone-950, and keep it in the middle, away from the burning edges.

Demos

Deep burn

burn={0.55} lets the fire eat about halfway to the middle, roughness={0.9} makes the front raggeder, with deeper bays and tongues, and temperature={1800} burns it hotter, so more of the front glows yellow-white. What's left is an island of paper for a short headline.

In a card

The burn is measured from the box's height, so in a small card the same burn takes a bigger share of the width. burn={0.35} shows more of the fire in a small surface, and embers={0.8} sends up more embers.

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 front is a thin line, so it renders at full resolution by default: quality={0.5} costs a quarter as much, but blurs the front and the embers. 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 frame of char and a glowing line round the paper, in the paper, char and scorch colors, 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 fire is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, five seconds in, and stops. Nothing flashes: the front creeps and brightens over seconds, and each ember is a few pixels wide. In the middle of the sheet (the central 60% of its width and half its height), stone-950 text stays above 14:1 at the default burn. White text doesn't read on the paper; use it only on the char, or not at all.

FAQ

API Reference