React Plasma Waves Shaders

Powered by

React

react-shaders

GPU Shaders

Need mesmerizing plasma wave effects without complex setup? Most developers use static gradients that can't capture the organic energy of plasma. This React plasma waves component uses GPU mathematics to create dynamic, flowing plasma patterns with multiple energy layers and vibrant color cycling.

Copy-paste TypeScript component that creates hypnotic plasma wave effects with multi-layer energy patterns and color transitions. Sophisticated plasma mathematics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth plasma energy motion.

React plasma waves with GPU energy mathematics

Dynamic plasma energy layers with vibrant colors and smooth animation:

import { WavesShaders } from "@/components/ui/shadcn-io/waves-shaders";export default function WavesShadersDemo() {  return (    <WavesShaders      speed={0.5}      intensity={0.8}      colorVariation={1.2}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface WavesShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  colorVariation?: number;}const fragmentShader = `// Plasma Waves Shader// Original by Jasmine, https://www.shadertoy.com/view/ltXczj// Licensed under Creative Commons CC BY-NC-SA 3.0// Modified for React implementationvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;    float time = iTime * u_speed;    vec3 col = vec3(0.0);    // Create multiple plasma layers    for (int i = 0; i < 4; i++) {        float fi = float(i);        // Layer parameters        float freq = 1.0 + fi * 0.5;        float phase = time * (0.5 + fi * 0.2);        // Plasma wave calculation        float wave1 = sin(uv.x * freq * 3.0 + phase);        float wave2 = sin(uv.y * freq * 2.0 + phase * 1.3);        float wave3 = sin((uv.x + uv.y) * freq * 1.5 + phase * 0.8);        float wave4 = sin(length(uv) * freq * 4.0 + phase * 1.7);        // Combine waves        float plasma = (wave1 + wave2 + wave3 + wave4) * 0.25;        // Create color based on plasma value and layer        vec3 layerCol = vec3(            sin(plasma * 3.14159 + fi * 2.0 + time * u_colorVariation),            sin(plasma * 3.14159 + fi * 2.0 + 2.094 + time * u_colorVariation * 0.8),            sin(plasma * 3.14159 + fi * 2.0 + 4.188 + time * u_colorVariation * 1.2)        ) * 0.5 + 0.5;        // Layer intensity falloff        float intensity = 1.0 / (1.0 + fi * 0.3);        // Add layer to final color        col += layerCol * intensity * u_intensity;    }    // Add center glow    float centerGlow = 1.0 - length(uv) * 0.8;    centerGlow = max(0.0, centerGlow);    col += vec3(0.1, 0.2, 0.4) * centerGlow * 0.3;    // Final color adjustments    col = pow(col, vec3(0.8)); // Gamma correction    fragColor = vec4(col, 1.0);}`;export const WavesShaders = forwardRef<HTMLDivElement, WavesShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  colorVariation = 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_colorVariation: { type: '1f', value: colorVariation },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});WavesShaders.displayName = "WavesShaders";

Based on shader by Jasmine - Licensed under Creative Commons CC BY-NC-SA 3.0

Perfect for React 19, Next.js 15, and modern TypeScript projects. Plasma patterns rendered entirely on GPU using GLSL energy mathematics with layered animation. Customizable speed, intensity, and color variation. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { WavesShaders } from "@/components/ui/waves-shaders";

export default function PlasmaBackground() {
  return (
    <WavesShaders
      speed={0.5}
      intensity={0.8}
      colorVariation={1.2}
    >
      <div className="relative z-10">
        <h1>Content over plasma waves</h1>
      </div>
    </WavesShaders>
  );
}

Why plasma effects require mathematical precision

CSS gradients can't capture the organic energy of plasma. Static effects lack the dynamic flow of electromagnetic fields. Video backgrounds are heavy and don't adapt to user interaction. Most libraries use simple animations that can't replicate plasma physics.

GPU plasma mathematics solve this with authentic energy field calculations. Multiple plasma layers create natural energy interference. Dynamic color cycling mimics electromagnetic spectrum shifts. Smooth mathematical curves ensure fluid, organic plasma motion at 60fps.

This React plasma waves component uses GLSL energy functions for authentic plasma behavior. Multiple wave calculations create complex plasma patterns. Color transitions flow smoothly through electromagnetic spectrums. Sophisticated but elegant plasma mathematics.

React plasma waves shader features

• Multi-layer plasma energy - Multiple plasma layers with different frequencies create complex energy patterns
• Dynamic color cycling - Smooth hue transitions through electromagnetic spectrum
• Intensity control - Adjustable plasma energy from subtle to dramatic
• Color variation effects - Control plasma color shifting and spectral evolution
• Energy field blending - Multiple plasma layers blend naturally for organic appearance
• Center glow effects - Radial energy concentration for authentic plasma physics
• Creative Commons licensed - Based on authentic plasma shader with proper attribution
• Smooth animation timing - Consistent plasma flow with customizable speed
• Mathematical precision - Authentic plasma field calculations for natural motion
• Energy authenticity - Based on electromagnetic field mathematics
• 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
• Versatile backgrounds - Perfect for sci-fi interfaces, energy themes, or dynamic effects

API Reference

WavesShaders

Main container component for the plasma wave energy effect.

GPU plasma waves troubleshooting

Plasma too dim: Increase intensity to 1.5+ for more dramatic energy effects. Plasma effects are naturally vibrant - adjust for visual impact.

Movement too slow/fast: Adjust speed for comfortable plasma flow. 0.3 creates gentle, ambient plasma. 1.5+ creates energetic, dynamic plasma motion.

Colors too static: Increase colorVariation to 1.8+ for vivid, shifting plasma colors. Higher values create more dramatic color evolution.

Effect too subtle: Boost both intensity and colorVariation for more dramatic plasma energy. Plasma should feel alive and energetic.

Colors shifting too fast: Lower colorVariation to 0.5 for slower, more controlled color transitions. Zero creates static color plasma.

Mobile performance issues: GPU plasma calculation uses standard operations but consider reducing speed to 0.5 on older mobile devices for optimal performance.

GPU compatibility: Plasma effects use sine functions and basic math supported on all modern GPUs. Provide CSS gradient fallbacks for very old devices.

More React shader components

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

React plasma waves effect FAQ