Components
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.
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>
);
}