Cosmic Plasma Web

Component 62

About

A mesmerizing WebGL shader component that creates an animated cosmic plasma web with interconnected energy nodes, flowing particles, and organic movement. Built with OGL and React, featuring smooth mouse interactions, customizable colors, and multiple visual layers for depth.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cosmic Plasma Web to your project and fits it to your theme.

Code

How Cosmic Plasma Web is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PlasmaWeb } from "@/components/ui/cosmic-plasma-web";

const settings = {
  hueShift: 200,
  density: 1.2,
  glowIntensity: 1.0,
  saturation: 0.8,
  brightness: 0.7,
  energyFlow: 1.2,
  pulseIntensity: 0.3,
  attractionStrength: 2.0,
  mouseAttraction: true,
  transparent: false,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <PlasmaWeb
        hueShift={s.hueShift}
        density={s.density}
        glowIntensity={s.glowIntensity}
        saturation={s.saturation}
        brightness={s.brightness}
        energyFlow={s.energyFlow}
        pulseIntensity={s.pulseIntensity}
        attractionStrength={s.attractionStrength}
        mouseAttraction={s.mouseAttraction}
        transparent={s.transparent}
      />
    </div>
  );
}