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