Smoke

Three layers of fractal noise fold into each other to make slow, glowing smoke. An ember palette is hue-rotated into electric blue. The cursor drops a ripple that rides a spring, so it glides after fast moves and settles instead of snapping.

fbm warpripplespring cursor

Live· ripple

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/smoke.json

Installs 5 files into components/shaders. The engine is shared, so a second shader only adds its own three files.

Usage

Mount it behind your content

app/hero.tsx

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

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <SmokeShader className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else. The cursor is tracked on the window, so content on top doesn’t block it.

API reference

Props

Prop	Type	Default	Description
colors	ShaderColor[]	["#160B0B", "#C2402A", "#F49D37", "#FFE8C2"]	Palette, low → high. Hex strings or 0–1 RGB triplets, up to 8.
speed	number	0.5	Multiplier on elapsed seconds.
scale	number	1.06	Zoom. Higher values show more of the field.
intensity	number	0.61	Turbulence.
paramA	number	0.71	Shader-specific parameter.
warp	number	0.2	Amount of organic domain warp.
detail	number	1.89	Frequency of the warp noise.
contrast	number	1.22	Colour grade: contrast.
brightness	number	-0.06	Colour grade: brightness offset.
saturation	number	1.5	Colour grade: saturation.
hue	number	2.86	Hue rotation in radians.
vignette	number	0.29	Edge darkening, 0–1.
blur	number	0.006	Soft 5-tap blur radius.
grain	number	0.08	Film grain amount.
seed	number	4786	Noise seed.
rotation	number	0.56	Field rotation in radians.
drift	number	0.04	Slow positional drift.
oklab	boolean	true	Blend palette colours in OKLab.
offset	[number, number]	[0.11,0.19]	Pans the field.
cursor	Partial<ShaderCursor>	{"effect":"ripple","strength":0.8,"radius":0.3,"follow":"spring"}	Pointer effect: push, lens, swirl, ripple, glow or none.
paused	boolean	false	Freezes the current frame.
maxDpr	number	2	Cap on devicePixelRatio.
respectReducedMotion	boolean	true	Draws a still frame for prefers-reduced-motion.
className	string	—	Classes for the absolutely-positioned wrapper.

Keep exploring

More shaders

02

Metaballs

Five orbiting blobs that melt into one field.

metaballsOKLabswirl cursor

08

Dot Globe

A thousand dots turning in perspective.

Canvas 2Dperspectivepoint sphere