React Plasma Shaders

Powered by

React

react-shaders

WebGL

Need organic energy effects without heavy particle systems? Most developers use CSS gradients that look static or JavaScript animations that kill performance. This React plasma component uses WebGL fragment shaders for mathematical energy patterns that flow like real plasma.

Copy-paste TypeScript component that creates flowing plasma energy with multiple wave layers and smooth color cycling. Organic patterns that pulse and shift through the color spectrum. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—zero CPU animation overhead.

React plasma effects with WebGL shaders

Flowing energy patterns with organic movement and smooth color spectrum transitions:

import PlasmaShaders from "@/components/ui/shadcn-io/plasma-shaders"export default function PlasmaDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <PlasmaShaders        speed={1.0}        intensity={1.3}        saturation={0.9}        complexity={1.0}        colorShift={1.2}      />    </div>  )}

'use client';import React, { forwardRef } from 'react';import { Shader } from 'react-shaders';import { cn } from '@/lib/utils';export interface PlasmaShadersProps extends React.HTMLAttributes<HTMLDivElement> {  /**   * Animation speed multiplier   * @default 1.0   */  speed?: number;  /**   * Plasma intensity and contrast   * @default 1.0   */  intensity?: number;  /**   * Color saturation level   * @default 1.0   */  saturation?: number;  /**   * Plasma flow complexity   * @default 1.0   */  complexity?: number;  /**   * Color shift speed   * @default 1.0   */  colorShift?: number;}const plasmaShader = `void mainImage( out vec4 fragColor, in vec2 fragCoord ){    // Normalize coordinates to center origin    vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.y;    // Time with speed control    float time = iTime * u_speed;    // Create multiple plasma layers with different frequencies    float plasma1 = sin(uv.x * 10.0 * u_complexity + time * 2.0) *                   cos(uv.y * 8.0 * u_complexity + time * 1.5);    float plasma2 = sin((uv.x + uv.y) * 7.0 * u_complexity + time * 1.8) *                   cos((uv.x - uv.y) * 9.0 * u_complexity + time * 2.3);    float plasma3 = sin(sqrt(uv.x*uv.x + uv.y*uv.y) * 12.0 * u_complexity + time * 1.2) *                   cos(atan(uv.y, uv.x) * 6.0 + time * 0.8);    // Add turbulence layer    float turbulence = sin(uv.x * 15.0 * u_complexity + time * 2.5) *                      cos(uv.y * 12.0 * u_complexity + time * 3.1) * 0.3;    // Combine plasma layers    float combined = (plasma1 + plasma2 + plasma3 + turbulence) * 0.25;    // Apply intensity    combined *= u_intensity;    // Create smooth color cycling    float colorTime = time * u_colorShift * 0.5;    // Generate RGB components with phase shifts for smooth color transitions    float red = sin(combined * 3.14159 + colorTime) * 0.5 + 0.5;    float green = sin(combined * 3.14159 + colorTime + 2.094) * 0.5 + 0.5; // 120 degrees    float blue = sin(combined * 3.14159 + colorTime + 4.188) * 0.5 + 0.5;  // 240 degrees    // Apply saturation control    vec3 baseColor = vec3(red, green, blue);    vec3 gray = vec3(dot(baseColor, vec3(0.299, 0.587, 0.114)));    vec3 finalColor = mix(gray, baseColor, u_saturation);    // Add subtle center glow    float centerDist = length(uv);    float glow = exp(-centerDist * 1.2) * 0.15;    finalColor += glow;    // Enhance contrast for more dramatic effect    finalColor = pow(finalColor, vec3(0.9));    // Ensure colors stay in valid range    finalColor = clamp(finalColor, 0.0, 1.0);    fragColor = vec4(finalColor, 1.0);}`;export const PlasmaShaders = forwardRef<HTMLDivElement, PlasmaShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  saturation = 1.0,  complexity = 1.0,  colorShift = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={plasmaShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_intensity: { type: '1f', value: intensity },          u_saturation: { type: '1f', value: saturation },          u_complexity: { type: '1f', value: complexity },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});PlasmaShaders.displayName = 'PlasmaShaders';export default PlasmaShaders;

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Mathematical plasma patterns rendered entirely on GPU using GLSL fragment shaders. Customizable speed, intensity, saturation, and complexity. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { PlasmaShaders } from "@/components/ui/plasma-shaders";

export default function EnergyBackground() {
  return (
    <PlasmaShaders
      speed={1.0}
      intensity={1.3}
      saturation={0.9}
      complexity={1.0}
      colorShift={1.2}
    >
      <div className="relative z-10">
        <h1>Content over plasma</h1>
      </div>
    </PlasmaShaders>
  );
}

Why energy animations struggle with realism

CSS gradients can't simulate organic energy flow. JavaScript particle systems for plasma effects destroy frame rates. Most libraries use simple scaling or rotation transforms that look artificial and lifeless.

WebGL fragment shaders solve this with real mathematical wave interference. Multiple sine wave layers combine to create organic turbulence. Color cycling through RGB spectrum creates authentic plasma energy appearance.

This React plasma component uses GLSL mathematics for authentic energy behavior. Layered wave functions with different frequencies create natural turbulence patterns. Phase-shifted color cycling creates smooth spectrum transitions like real plasma physics.

React plasma shader features

• WebGL energy physics - Mathematical sine wave combinations create organic plasma flow
• Multiple wave layers - Four different frequency patterns combine for complex turbulence
• Smooth color cycling - RGB spectrum transitions with phase-shifted color channels
• Organic turbulence - Natural energy patterns using mathematical wave interference
• Saturation control - Adjust color intensity from subtle to vivid energy effects
• Complexity scaling - Control pattern density and detail level
• Color shift timing - Independent control of spectrum cycling speed
• 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
• Mobile optimized - Efficient GPU usage for smooth mobile performance

API Reference

PlasmaShaders

Main container component for the dynamic plasma shader effect.

WebGL plasma troubleshooting

Plasma too subtle: Increase intensity to 1.5+ for more dramatic energy effects. Fragment shaders use different contrast scales than CSS effects.

Colors too muted: Boost saturation to 1.5 for vivid energy colors. Lower to 0.5 for subtle, ambient plasma effects perfect for background use.

Animation too chaotic: High complexity can overwhelm. Reduce complexity to 0.7 for gentler patterns, or lower speed to 0.6 for slower energy flow.

Mobile performance issues: GPU-intensive shaders need optimization. Lower complexity to 0.8 and intensity to 1.0 on mobile devices. Consider device detection for automatic adjustments.

Color cycling too fast: Adjust colorShift to control spectrum transitions. 0.5 creates slow, meditative color changes. 2.0+ creates rapid, energetic cycling.

Pattern too dense/sparse: Use complexity to adjust pattern detail. 0.5 creates large, flowing patterns. 1.5+ creates dense, detailed turbulence.

WebGL compatibility: Plasma effects require decent GPU. Provide CSS animated gradient fallbacks for older devices with limited WebGL support.

More React shader components

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

React plasma effect FAQ