Colorful Wave Pattern

A React UI component that renders an animated, customizable multi-colored wave pattern using WebGL2 and GLSL shaders. Adjust wave count, amplitude, frequency, brightness, color separation, and animation speed via props for dynamic, immersive backgrounds.

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

import ElectricWavesShader from "@/components/ui/colorful-wave-pattern-1";

const settings = {
  waveCount: 5,
  amplitude: 0.1,
  frequency: 2,
  brightness: 0.005,
  colorSeparation: 0.1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <ElectricWavesShader {...s} />
    </div>
  );
}