React Smoke Shaders

React smoke with GPU volumetric rendering. Realistic smoke effects for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building smoke effects?

Join our Discord community for help from other developers working with GPU smoke simulation and volumetric effects.

Need realistic smoke effects without heavy particle systems? Most developers use static images or simple opacity gradients that lack depth. This React smoke component uses GPU volumetric rendering to create convincing smoke with upward flow, turbulence, natural dissipation, and atmospheric lighting.

Copy-paste TypeScript component that creates immersive smoke effects with multiple columns and organic movement patterns. Volumetric noise generates realistic smoke density with proper scattering. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—authentic smoke simulation.

React smoke with GPU volumetric rendering

Realistic volumetric smoke with upward flow, turbulence, and natural dissipation:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SmokeShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  density?: number;  turbulence?: number;  height?: number;  dissipation?: number;}const fragmentShader = `// Hash function for noise generationfloat hash(vec2 p) {    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);}// Smooth noise functionfloat noise(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    f = f * f * (3.0 - 2.0 * f);    float a = hash(i);    float b = hash(i + vec2(1.0, 0.0));    float c = hash(i + vec2(0.0, 1.0));    float d = hash(i + vec2(1.0, 1.0));    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);}// Fractal Brownian Motion for organic smoke patternsfloat fbm(vec2 p) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for (int i = 0; i < 8; i++) {        value += amplitude * noise(p * frequency);        amplitude *= 0.5;        frequency *= 2.0;    }    return value;}// 3D noise for volumetric effectsfloat noise3D(vec3 p) {    vec2 xy = p.xy;    vec2 xz = p.xz;    vec2 yz = p.yz;    return (noise(xy) + noise(xz) + noise(yz)) / 3.0;}// Generate smoke columnfloat smokeColumn(vec2 uv, float time, float columnIndex) {    // Column base position    float baseX = 0.3 + columnIndex * 0.4 + sin(time * u_speed * 0.5 + columnIndex) * 0.1;    // Distance from column center    float distFromCenter = abs(uv.x - baseX);    // Vertical flow with turbulence    vec2 flowPos = uv;    flowPos.y -= time * u_speed * 0.5; // Upward movement    // Add swirling motion    float swirl = sin(uv.y * 6.0 + time * u_speed * 2.0 + columnIndex) * 0.1;    flowPos.x += swirl;    // Turbulence layers    float turbulence1 = fbm(flowPos * 4.0 + vec2(time * u_speed, 0.0)) * u_turbulence;    float turbulence2 = fbm(flowPos * 8.0 - vec2(time * u_speed * 0.7, 0.0)) * u_turbulence * 0.5;    float turbulence3 = fbm(flowPos * 16.0 + vec2(time * u_speed * 1.3, 0.0)) * u_turbulence * 0.25;    flowPos.x += (turbulence1 + turbulence2 + turbulence3) * 0.3;    // Column width (expands with height)    float width = 0.1 + uv.y * 0.3 * u_height;    // Base column shape    float column = 1.0 - smoothstep(0.0, width, distFromCenter);    // Height falloff with organic variation    float heightNoise = fbm(vec2(baseX * 10.0, time * u_speed * 0.3));    float maxHeight = 0.7 + heightNoise * 0.3;    float heightFalloff = 1.0 - smoothstep(0.0, maxHeight * u_height, uv.y);    // Volumetric density with 3D noise    vec3 volumePos = vec3(flowPos.x * 8.0, uv.y * 12.0, time * u_speed * 2.0 + columnIndex * 10.0);    float volumetricNoise = noise3D(volumePos) * 0.6;    volumetricNoise += noise3D(volumePos * 2.0) * 0.3;    volumetricNoise += noise3D(volumePos * 4.0) * 0.1;    column *= heightFalloff;    column *= (0.5 + volumetricNoise);    return column * u_density;}// Smoke dissipation effectfloat smokeDissipation(vec2 uv, float smokeValue, float time) {    // Higher smoke dissipates more    float dissipationRate = u_dissipation * (1.0 + uv.y * 2.0);    // Add random dissipation patterns    float dissipationNoise = fbm(uv * 12.0 + vec2(time * u_speed * 0.8, 0.0));    dissipationRate *= 0.7 + dissipationNoise * 0.6;    return smokeValue * (1.0 - dissipationRate * 0.3);}// Ambient smoke (background wisps)float ambientSmoke(vec2 uv, float time) {    vec2 p = uv * 6.0 + vec2(time * u_speed * 0.2, -time * u_speed * 0.3);    float ambient = fbm(p) * 0.3;    ambient += fbm(p * 1.7 + vec2(time * u_speed * 0.4, 0.0)) * 0.2;    // Only in upper areas    ambient *= smoothstep(0.2, 0.8, uv.y);    return ambient * u_density * 0.4;}// Smoke color palettevec3 smokeColor(float density, vec2 uv, float time) {    // Realistic smoke colors    vec3 lightSmoke = vec3(0.9, 0.9, 0.9);     // Light gray    vec3 mediumSmoke = vec3(0.6, 0.6, 0.6);    // Medium gray    vec3 darkSmoke = vec3(0.3, 0.3, 0.3);      // Dark gray    vec3 warmSmoke = vec3(0.7, 0.65, 0.6);     // Warm gray (subtle brown)    // Color variation based on density and height    vec3 baseColor;    if (density > 0.7) {        baseColor = mix(mediumSmoke, darkSmoke, (density - 0.7) * 3.33);    } else if (density > 0.3) {        baseColor = mix(lightSmoke, mediumSmoke, (density - 0.3) * 2.5);    } else {        baseColor = mix(vec3(1.0), lightSmoke, density * 3.33);    }    // Add warm tones near the base    float warmth = (1.0 - uv.y) * 0.3;    baseColor = mix(baseColor, warmSmoke, warmth * density);    // Add subtle color variation with noise    float colorNoise = fbm(uv * 8.0 + time * u_speed * 0.1);    baseColor += (colorNoise - 0.5) * 0.1;    return baseColor;}// Volumetric lighting effectfloat volumetricLighting(vec2 uv, float density) {    // Simulate light scattering through smoke    vec2 lightDir = normalize(vec2(0.3, 0.8));    float lightDist = dot(uv - vec2(0.2, 0.0), lightDir);    // Light rays through smoke    float lightRays = exp(-abs(lightDist) * 4.0) * 0.3;    // Light scattering    float scattering = density * lightRays;    return scattering;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = fragCoord / iResolution.xy;    float time = iTime;    // Generate multiple smoke columns    float totalSmoke = 0.0;    for (int i = 0; i < 3; i++) {        float columnIndex = float(i);        float column = smokeColumn(uv, time, columnIndex);        totalSmoke += column;    }    // Add ambient background smoke    totalSmoke += ambientSmoke(uv, time);    // Apply dissipation    totalSmoke = smokeDissipation(uv, totalSmoke, time);    // Add volumetric lighting    float lighting = volumetricLighting(uv, totalSmoke);    totalSmoke += lighting;    // Clamp density    totalSmoke = clamp(totalSmoke, 0.0, 1.0);    // Get smoke color    vec3 color = smokeColor(totalSmoke, uv, time);    // Create dark background (like industrial/atmospheric setting)    vec3 background = vec3(0.1, 0.12, 0.15);    // Mix smoke with background    vec3 finalColor = mix(background, color, totalSmoke);    // Add atmospheric depth    float depth = 1.0 - uv.y * 0.3;    finalColor *= depth;    // Slight contrast boost    finalColor = (finalColor - 0.5) * 1.2 + 0.5;    // Calculate alpha (transparency)    float alpha = 0.3 + totalSmoke * 0.7;    // Ensure colors stay in valid range    finalColor = clamp(finalColor, 0.0, 1.0);    alpha = clamp(alpha, 0.0, 1.0);    fragColor = vec4(finalColor, alpha);}`;export const SmokeShaders = forwardRef<HTMLDivElement, SmokeShadersProps>(({  className,  speed = 1.0,  density = 1.0,  turbulence = 1.0,  height = 1.0,  dissipation = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_density: { type: '1f', value: density },          u_turbulence: { type: '1f', value: turbulence },          u_height: { type: '1f', value: height },          u_dissipation: { type: '1f', value: dissipation },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SmokeShaders.displayName = "SmokeShaders";

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Smoke effects rendered entirely on GPU using GLSL volumetric algorithms with fractal noise. Customizable speed, density, turbulence, height, and dissipation. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/smoke-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/smoke-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/smoke-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/smoke-shaders.json

Usage

import { SmokeShaders } from "@/components/ui/smoke-shaders";

export default function IndustrialBackground() {
  return (
    <SmokeShaders
      speed={0.8}
      density={1.1}
      turbulence={1.2}
      height={1.0}
      dissipation={0.8}
    >
      <div className="relative z-10">
        <h1>Content over smoke</h1>
      </div>
    </SmokeShaders>
  );
}

Why smoke animations struggle with realism

CSS opacity effects can't simulate volumetric properties. Video backgrounds lack interactivity and proper depth. Most libraries use simple particle systems that don't capture the complex fluid dynamics of real smoke behavior.

GPU volumetric rendering solves this with mathematical smoke simulation. 3D noise creates realistic density variation. Upward flow with turbulence mimics thermal convection. Natural dissipation patterns simulate how real smoke disperses in atmosphere.

This React smoke component uses GLSL mathematics for authentic smoke behavior. Multiple smoke columns with independent turbulence. Volumetric lighting simulates light scattering through smoke particles. Realistic color transitions from warm base to cool dissipated areas.

React smoke shader features

Volumetric rendering - 3D noise creates realistic smoke density with proper depth
Multiple smoke columns - Three independent smoke sources with organic variation
Upward flow dynamics - Thermal convection simulation with natural upward movement
Turbulence systems - Multiple layers of fractal noise create organic smoke motion
Natural dissipation - Smoke gradually fades and disperses like real atmospheric smoke
Swirling motion - Rotational flow patterns add authentic smoke behavior
Volumetric lighting - Light scattering through smoke creates realistic illumination
Realistic color palette - Gray gradients with subtle warm tones near smoke base
Ambient smoke wisps - Background smoke layers add atmospheric depth
Height-based expansion - Smoke columns expand naturally as they rise
TypeScript React component - Full IDE support with prop definitions
Next.js compatible - Works with App Router and modern React patterns
shadcn/ui integration - Consistent with Tailwind CSS design systems
Copy-paste installation - No vendor lock-in, you own the shader code
Industrial aesthetics - Perfect for atmospheric, dramatic, or industrial themes

API Reference

SmokeShaders

Main container component for the volumetric smoke effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Smoke movement and flow speed (0.1 to 3.0)
`density`	`number`	`1.0`	Smoke thickness and opacity (0.3 to 2.0)
`turbulence`	`number`	`1.0`	Chaotic movement intensity (0.5 to 3.0)
`height`	`number`	`1.0`	Smoke column height and reach (0.5 to 2.0)
`dissipation`	`number`	`1.0`	Smoke fade and dispersal rate (0.2 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU smoke troubleshooting

Smoke too light: Increase density to 1.5+ for thicker, more visible smoke. Volumetric rendering creates realistic transparency that may appear subtle.

Movement too slow/fast: Adjust speed for natural smoke flow. 0.5 creates slow, heavy smoke. 1.5+ creates light, rapidly moving vapor effects.

Not enough chaos: Increase turbulence to 2.0+ for more chaotic, swirling smoke patterns. Lower values create smooth, laminar flow effects.

Smoke too short/tall: Use height to control vertical extent. 0.7 creates low, ground-level smoke. 1.5+ creates towering smoke columns.

Too persistent: Increase dissipation to 1.5+ for faster smoke dispersal. Lower values create thick, persistent smoke that lingers longer.

Mobile performance issues: GPU volumetric calculation is intensive. Lower density to 0.8 and reduce noise octaves on mobile devices for smoother performance.

GPU compatibility: Smoke effects require GPU for real-time volumetric calculation. Provide CSS gradient fallbacks for older devices without sufficient processing power.

React Smoke Shaders

React smoke with GPU volumetric rendering

Installation

Usage

Why smoke animations struggle with realism

React smoke shader features

API Reference

SmokeShaders

GPU smoke troubleshooting

More React shader components

Fire Shaders

Sea Shaders

Water Shaders

Gradient Mesh Shaders

Hologram Shaders

Plasma Shaders

React smoke effect FAQ

On this page

React Smoke Shaders