React 3D Fire Shaders

Powered by

React

react-shaders

GPU Shaders

Need realistic 3D fire effects with authentic volumetric turbulence? Most developers use sprite-based or 2D particle systems that can't capture the complex 3D structure of real flames. This React 3D fire component uses GPU raymarching with multi-frequency turbulence to create stunning volumetric fire with natural flame dynamics.

Copy-paste TypeScript component that creates mesmerizing 3D fire effects with raymarching algorithms, cone-shaped flame geometry, and multi-layer turbulence. Advanced combustion physics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth volumetric flames.

React 3D fire with volumetric turbulence

Realistic flame rendering with 3D raymarching, twisted geometry, and frequency-based turbulence:

import { Fire3DShaders } from "@/components/ui/shadcn-io/fire-3d-shaders";export default function Fire3DShadersDemo() {  return (    <Fire3DShaders      speed={1.0}      intensity={1.2}      height={1.0}      turbulence={1.1}      colorShift={1.0}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface Fire3DShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  height?: number;  turbulence?: number;  colorShift?: number;}const fragmentShader = `// Tanh approximation for tone mappingvec4 tanhApprox(vec4 x) {    vec4 x2 = x * x;    return x * (3.0 + x2) / (3.0 + 3.0 * x2);}void mainImage(out vec4 O, vec2 I){    float t = iTime * u_speed;    float i = 0.0;    float z = 0.0;    float d = 0.0;    O = vec4(0.0);    // Raymarching loop with 50 iterations    for(float step = 0.0; step < 50.0; step++) {        i = step;        // Compute raymarch sample point        vec3 p = z * normalize(vec3(I + I, 0) - iResolution.xyy);        // Shift back and animate        p.z += 5.0 + cos(t) * u_height;        // Twist and rotate        mat2 rotMat = mat2(cos(p.y * 0.5 + vec4(0, 33, 11, 0)));        p.xz *= rotMat / max(p.y * 0.1 + 1.0, 0.1);        // Turbulence loop (increase frequency)        float freq = 2.0;        for(int turbLoop = 0; turbLoop < 8; turbLoop++) {            // Add a turbulence wave            p += cos((p.yzx - vec3(t / 0.1, t, freq)) * freq * u_turbulence) / freq;            freq = freq / 0.6;        }        // Sample approximate distance to hollow cone        float dist = 0.01 + abs(length(p.xz) + p.y * 0.3 - 0.5) / 7.0;        z += dist;        d = dist;        // Add color and glow attenuation        vec4 color = (sin(z / 3.0 + vec4(7, 2, 3, 0) * u_colorShift) + 1.1) / d;        O += color * u_intensity;    }    // Tanh tonemapping    O = tanhApprox(O / 1000.0);}`;export const Fire3DShaders = forwardRef<HTMLDivElement, Fire3DShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  height = 1.0,  turbulence = 1.0,  colorShift = 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_intensity: { type: '1f', value: intensity },          u_height: { type: '1f', value: height },          u_turbulence: { type: '1f', value: turbulence },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});Fire3DShaders.displayName = "Fire3DShaders";

Original shader by XorDev - "3D Fire"

Perfect for React 19, Next.js 15, and modern TypeScript projects. Fire effects generated entirely on GPU using volumetric raymarching with hollow cone geometry. Customizable speed, intensity, height, turbulence, and color shifting. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/fire-3d-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/fire-3d-shaders.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/fire-3d-shaders.json

Usage

import { Fire3DShaders } from "@/components/ui/fire-3d-shaders";

export default function VolumetricFire() {
  return (
    <Fire3DShaders
      speed={1.0}
      intensity={1.2}
      height={1.0}
      turbulence={1.1}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over 3D fire</h1>
      </div>
    </Fire3DShaders>
  );
}

Why 3D fire effects require advanced techniques

Sprite-based fire lacks volumetric depth and realistic lighting. 2D particle systems can't capture the complex 3D turbulence of real combustion. Most approaches struggle with the hollow cone geometry of flame structures. Traditional methods can't handle the multi-frequency turbulence that creates authentic flame dynamics.

GPU raymarching solves this with true 3D volumetric rendering. Multi-frequency turbulence functions simulate the chaotic nature of combustion. Cone-shaped distance functions create natural flame geometry. Matrix rotations add realistic twisting motion. Distance-based coloring provides authentic flame brightness falloff.

This React 3D fire component uses professional fluid dynamics visualization techniques. Raymarching traces paths through 3D flame volume. Turbulence layers create complex flow patterns. Hollow cone geometry matches real flame physics. Tanh tone mapping handles extreme brightness ranges.

React 3D fire shader features

• Volumetric raymarching - True 3D flame rendering with depth and volume
• Multi-frequency turbulence - Complex flame dynamics with chaotic flow patterns
• Hollow cone geometry - Authentic flame shape based on combustion physics
• Matrix rotations - Twisting flame motion with realistic angular dynamics
• Distance-based coloring - Natural brightness falloff from flame core to edges
• Frequency scaling turbulence - Multiple octaves create fine and coarse flame detail
• 3D coordinate transformations - Proper perspective and flame orientation
• Tanh tone mapping - Professional brightness compression for flame extremes
• Customizable flame height - Control flame size and vertical expansion
• Turbulence intensity - Adjust flame chaos and motion complexity
• Speed control - Animation timing for flame flicker and movement
• Color phase shifting - Thermal spectrum simulation with flame temperature
• Intensity scaling - Overall brightness for different lighting environments
• 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

API Reference

Fire3DShaders

Main container component for the 3D volumetric fire effect.

GPU 3D fire troubleshooting

Flames too slow/fast: Adjust speed for natural flame motion. Lower values create gentle flickering, higher values create intense dynamic flames.

Fire too dim/bright: Use intensity to control overall brightness. Real flames have extreme dynamic ranges - adjust for your lighting environment.

Flames too short/tall: Modify height for flame scale. This affects both vertical expansion and overall flame size relative to the viewport.

Motion too calm/chaotic: Adjust turbulence for flame dynamics. Higher values create more dramatic swirling and chaotic motion patterns.

Colors too monochrome/varied: Use colorShift to control thermal spectrum. This simulates how flame temperature affects color from red through yellow to white.

Mobile performance: Reduce turbulence iterations or intensity for older devices. 3D raymarching is intensive but optimized for modern mobile GPUs.

Volumetric depth: The 3D effect requires good contrast and viewing distance. Ensure proper display calibration for optimal flame depth perception.

More React shader components

Explore other GPU-accelerated shader components for Next.js applications:

React 3D fire FAQ