Dynamic Waveform

"Dynamic Waveform" component generates a multi-layered, oscillating pattern inspired by audio visualizers and signal monitors. It uses a combination of sine waves and noise to create a constantly evolving and intricate animation. I've included new interactive controls for Wave Complexity, Amplitude, and Frequency, allowing you to transform the visual from simple, smooth waves into a complex, chaotic signal.

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

import ShaderCanvas from "@/components/ui/dynamic-waveform";

const settings = {
  color1: "#ff4444",
  color2: "#4444ff",
  complexity: 8,
  amplitude: 1,
  frequency: 1,
  mouseDistortion: 0.5,
  speed: 1,
};

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