Plasma Wave

The Plasma Wave component creates horizontally-mirrored interactive WebGL-powered dual-band plasma wave flows with custom parallax sways and lens chromatic aberrations.

Preview

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/plasma-wave.json

Basic Example

import { PlasmaWave } from "@/registry/klarden-ui/plasma-wave";

export default function App() {
  return (
    <PlasmaWave
      colors={["#EAB308", "#E2E8F0"]}
      speed1={0.06}
      speed2={0.06}
      focalLength={1.0}
      className="h-screen w-full"
    />
  );
}

Properties

Prop	Type	Default	Description
`colors`	`[string, string]`	`["#A855F7", "#06B6D4"]`	Array of two hex colors - one for each plasma wave band.
`speed1`	`number`	`0.05`	Speed of the first plasma wave.
`speed2`	`number`	`0.05`	Speed of the second plasma wave.
`focalLength`	`number`	`0.8`	Focal length of the camera projection.
`opacity`	`number`	`1`	Canvas opacity (0-1). Use to blend with background layers.
`className`	`string`	`—`	Additional CSS classes for the container.
`children`	`ReactNode`	`—`	Overlay content to display on top of the plasma wave.