React Plasma Background

React plasma background with WebGL 2 rendering. Features organic fluid motion, mouse interaction, and customizable colors with advanced shader mathematics.

React

OGL

Creating fluid plasma effects?

Join our Discord community for help from other developers working with shader effects and WebGL.

Ever watched plasma lamps create those mesmerizing, organic fluid patterns that seem to flow and morph with their own mysterious life? The way tendrils of electric light dance and twist, creating ever-changing ribbons of color that respond to touch and movement? Most backgrounds are static, predictable, and lifeless. This React component recreates that hypnotic plasma effect with WebGL 2 shaders, mathematical fluid dynamics, and mouse interaction that makes digital surfaces feel alive and responsive.

Interactive plasma with fluid dynamics

Watch organic plasma patterns flow and respond to mouse movement with real-time distortion:

Loading component...

'use client';import React, { useEffect, useRef, forwardRef } from "react";// @ts-ignoreimport { Renderer, Program, Mesh, Triangle } from "ogl";import { cn } from '@/lib/utils';export interface PlasmaBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {  color?: string;  speed?: number;  direction?: "forward" | "reverse" | "pingpong";  scale?: number;  opacity?: number;  mouseInteractive?: boolean;}const hexToRgb = (hex: string): [number, number, number] => {  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);  if (!result) return [1, 0.5, 0.2];  return [    parseInt(result[1], 16) / 255,    parseInt(result[2], 16) / 255,    parseInt(result[3], 16) / 255,  ];};const vertex = `#version 300 esprecision highp float;in vec2 position;in vec2 uv;out vec2 vUv;void main() {  vUv = uv;  gl_Position = vec4(position, 0.0, 1.0);}`;const fragment = `#version 300 esprecision highp float;uniform vec2 iResolution;uniform float iTime;uniform vec3 uCustomColor;uniform float uUseCustomColor;uniform float uSpeed;uniform float uDirection;uniform float uScale;uniform float uOpacity;uniform vec2 uMouse;uniform float uMouseInteractive;out vec4 fragColor;void mainImage(out vec4 o, vec2 C) {  vec2 center = iResolution.xy * 0.5;  C = (C - center) / uScale + center;    vec2 mouseOffset = (uMouse - center) * 0.0002;  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);    float i, d, z, T = iTime * uSpeed * uDirection;  vec3 O, p, S;  for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {    p = z*normalize(vec3(C-.5*r,r.y));     p.z -= 4.;     S = p;    d = p.y-T;        p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05);     Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T));     z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4;     o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));  }    o.xyz = tanh(O/1e4);}bool finite1(float x){ return !(isnan(x) || isinf(x)); }vec3 sanitize(vec3 c){  return vec3(    finite1(c.r) ? c.r : 0.0,    finite1(c.g) ? c.g : 0.0,    finite1(c.b) ? c.b : 0.0  );}void main() {  vec4 o = vec4(0.0);  mainImage(o, gl_FragCoord.xy);  vec3 rgb = sanitize(o.rgb);    float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;  vec3 customColor = intensity * uCustomColor;  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));    float alpha = length(rgb) * uOpacity;  fragColor = vec4(finalColor, alpha);}`;export const PlasmaBackground = forwardRef<HTMLDivElement, PlasmaBackgroundProps>(({  className,  color = "#ffffff",  speed = 1,  direction = "forward",  scale = 1,  opacity = 1,  mouseInteractive = true,  ...props}, ref) => {  // props already contains only DOM props after destructuring above  const domProps = props;  const containerRef = useRef<HTMLDivElement | null>(null);  const mousePos = useRef({ x: 0, y: 0 });  useEffect(() => {    const container = containerRef.current;    if (!container) return;    const useCustomColor = color ? 1.0 : 0.0;    const customColorRgb = color ? hexToRgb(color) : [1, 1, 1];    const directionMultiplier = direction === "reverse" ? -1.0 : 1.0;    const renderer = new Renderer({      webgl: 2,      alpha: true,      antialias: false,      dpr: Math.min(window.devicePixelRatio || 1, 2),    });    const gl = renderer.gl;    const canvas = gl.canvas as HTMLCanvasElement;    canvas.style.display = "block";    canvas.style.width = "100%";    canvas.style.height = "100%";    container.appendChild(canvas);    const geometry = new Triangle(gl);    const program = new Program(gl, {      vertex: vertex,      fragment: fragment,      uniforms: {        iTime: { value: 0 },        iResolution: { value: new Float32Array([1, 1]) },        uCustomColor: { value: new Float32Array(customColorRgb) },        uUseCustomColor: { value: useCustomColor },        uSpeed: { value: speed * 0.4 },        uDirection: { value: directionMultiplier },        uScale: { value: scale },        uOpacity: { value: opacity },        uMouse: { value: new Float32Array([0, 0]) },        uMouseInteractive: { value: mouseInteractive ? 1.0 : 0.0 },      },    });    const mesh = new Mesh(gl, { geometry, program });    const handleMouseMove = (e: MouseEvent) => {      if (!mouseInteractive) return;      const rect = container.getBoundingClientRect();      mousePos.current.x = e.clientX - rect.left;      mousePos.current.y = e.clientY - rect.top;      const mouseUniform = program.uniforms.uMouse.value as Float32Array;      mouseUniform[0] = mousePos.current.x;      mouseUniform[1] = mousePos.current.y;    };    if (mouseInteractive) {      container.addEventListener("mousemove", handleMouseMove);    }    const setSize = () => {      const rect = container.getBoundingClientRect();      const width = Math.max(1, Math.floor(rect.width));      const height = Math.max(1, Math.floor(rect.height));      renderer.setSize(width, height);      const res = program.uniforms.iResolution.value as Float32Array;      res[0] = gl.drawingBufferWidth;      res[1] = gl.drawingBufferHeight;    };    const ro = new ResizeObserver(setSize);    ro.observe(container);    setSize();    let raf = 0;    const t0 = performance.now();    const loop = (t: number) => {      let timeValue = (t - t0) * 0.001;      if (direction === "pingpong") {        const cycle = Math.sin(timeValue * 0.5) * directionMultiplier;        (program.uniforms.uDirection as any).value = cycle;      }      (program.uniforms.iTime as any).value = timeValue;      renderer.render({ scene: mesh });      raf = requestAnimationFrame(loop);    };    raf = requestAnimationFrame(loop);    return () => {      cancelAnimationFrame(raf);      ro.disconnect();      if (mouseInteractive && container) {        container.removeEventListener("mousemove", handleMouseMove);      }      try {        if (canvas.parentElement === container) {          container.removeChild(canvas);        }      } catch {}    };  }, [color, speed, direction, scale, opacity, mouseInteractive]);  return (    <div      ref={(node) => {        containerRef.current = node;        if (typeof ref === 'function') ref(node);        else if (ref) ref.current = node;      }}      className={cn("w-full h-full relative overflow-hidden", className)}      {...domProps}    />  );});PlasmaBackground.displayName = 'PlasmaBackground';export default PlasmaBackground;

Built for React applications with TypeScript and Next.js. Uses advanced WebGL 2 shaders with raymarching algorithms for fluid plasma simulation. The mathematical plasma generation creates authentic organic patterns while mouse interaction adds dynamic distortion effects. Perfect for hero sections, immersive galleries, or any interface needing sophisticated animated backgrounds. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/plasma-background.json

npx shadcn@latest add https://www.shadcn.io/registry/plasma-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/plasma-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/plasma-background.json

Why static backgrounds feel dead

Developers add a gradient or animated GIF and call it dynamic. Maybe they add a CSS animation that loops every few seconds. The problem? Predictable patterns don't capture the organic, ever-changing nature of real plasma that makes backgrounds feel alive and responsive to user presence.

Plasma backgrounds with WebGL shaders change everything. They tap into our fascination with organic fluid motion—the way plasma moves in unpredictable but mathematically beautiful patterns, how electrical fields create flowing tendrils that never repeat exactly. The shader-based calculations generate true plasma physics using raymarching algorithms and distance field mathematics.

This component handles complex WebGL 2 automatically. Raymarching, distance field calculations, plasma flow dynamics, and mouse distortion all work together seamlessly. The result feels like controlling real plasma with electromagnetic fields, not a simple animated texture.

Features

WebGL 2 shaders with advanced raymarching algorithms for authentic plasma simulation
Mouse interaction with electromagnetic-style distortion effects based on cursor position
Direction control including forward, reverse, and oscillating pingpong motion
Custom color mapping from grayscale plasma intensity to any hex color
Scale and speed controls for fine-tuning plasma flow characteristics
Opacity management with proper alpha blending for layering effects
Performance optimization with automatic device pixel ratio limiting and cleanup
Sanitization system preventing NaN and infinity values in shader calculations
TypeScript support with complete prop forwarding and type safety
Responsive design with automatic canvas resizing and proper cleanup

API Reference

PlasmaBackground

Prop	Type	Default	Description
`color`	`string`	`"#ffffff"`	Hex color for plasma tinting (empty for natural colors)
`speed`	`number`	`1`	Animation speed multiplier (0.1 to 5.0)
`direction`	`"forward" \| "reverse" \| "pingpong"`	`"forward"`	Plasma flow direction
`scale`	`number`	`1`	Plasma scale factor (0.5 to 3.0)
`opacity`	`number`	`1`	Overall opacity (0.0 to 1.0)
`mouseInteractive`	`boolean`	`true`	Enable mouse distortion effects
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Color System

The component supports flexible color control:

Color Value	Behavior	Visual Result	Performance
`undefined` or `""`	Natural plasma colors	Full spectrum rainbow	Optimal
Hex color (e.g. `"#ff6b35"`)	Color-tinted plasma	Monochromatic variations	Good
Invalid hex	Fallback orange	Default plasma tint	Good

Direction Modes

// Forward flowing plasma
<PlasmaBackground direction="forward" speed={1.5} />

// Reverse flowing plasma
<PlasmaBackground direction="reverse" speed={0.8} />

// Oscillating plasma (pingpong)
<PlasmaBackground direction="pingpong" speed={2} />

// Static plasma (speed 0)
<PlasmaBackground speed={0} />

Effect Combinations

// Classic plasma lamp
<PlasmaBackground
  color="#9d4edd"
  speed={1.0}
  direction="forward"
  scale={1.2}
  mouseInteractive={true}
/>

// High-energy electric effect
<PlasmaBackground
  color="#00f5ff"
  speed={3.0}
  direction="pingpong"
  scale={0.8}
  opacity={0.9}
/>

// Subtle ambient background
<PlasmaBackground
  color="#ffd60a"
  speed={0.5}
  direction="forward"
  scale={2}
  opacity={0.3}
  mouseInteractive={false}
/>

// Psychedelic rainbow plasma
<PlasmaBackground
  speed={2.5}
  direction="reverse"
  scale={1.5}
  mouseInteractive={true}
/>

Shader mathematics

Raymarching Algorithm: Uses distance field raymarching to trace through 3D plasma fields, calculating surface intersections with mathematical precision for organic fluid shapes.

Plasma Flow Dynamics: Implements trigonometric wave functions with time-based phase shifts to create flowing plasma tendrils that never repeat exactly.

Mouse Distortion: Calculates electromagnetic-style field distortions based on cursor position, using distance-based falloff for realistic plasma response.

Color Space Conversion: Transforms plasma intensity values through proper color space mathematics, supporting both natural spectrum and custom color tinting.

Performance considerations

WebGL 2 Requirement: Component automatically checks for WebGL 2 support. Falls back gracefully but may not render on very old devices.

Device Pixel Ratio: Automatically limits DPR to 2 to prevent performance issues on high-density displays while maintaining visual quality.

Shader Complexity: The raymarching algorithm is computationally intensive. Consider reducing speed or scale on lower-end hardware.

Mouse Interaction: Disabling mouseInteractive slightly improves performance by removing mouse event calculations and shader branching.

Common gotchas

WebGL Context Loss: Component handles WebGL context restoration automatically, but may briefly show blank content during GPU driver updates.

Color Tinting Logic: Empty string or undefined color shows natural plasma colors. Invalid hex codes fall back to orange, not black or transparent.

Direction Pingpong: Uses sine wave oscillation, creating natural acceleration/deceleration rather than linear back-and-forth motion.

Scale Effects: Large scale values (greater than 2) can cause performance issues and visual artifacts. Small values (less than 0.5) may make plasma details too fine to appreciate.

Mouse Coordinates: Mouse distortion uses canvas-relative coordinates, automatically handling canvas scaling and positioning.

NaN Prevention: Built-in sanitization prevents shader NaN/infinity values that could crash the rendering pipeline on some GPUs.

React Plasma Background

Interactive plasma with fluid dynamics

Installation

Why static backgrounds feel dead

Features

API Reference

PlasmaBackground

Color System

Direction Modes

Effect Combinations

Shader mathematics

Performance considerations

Common gotchas

You might also like

Northern Lights

Gradient Blinds

Silk Background

Light Rays

Questions developers actually ask

On this page

React Plasma Background