Components
Waves
A shader-based animated wave background using Three.js, ideal as a hero or landing page backdrop.
import { Waves } from "@/components/ui/waves";
const settings = {
waveSpeedX: 0.0125,
waveSpeedY: 0.005,
waveAmpX: 32,
waveColor1: "#071697",
waveColor2: "#00d4ff",
waveColor3: "#000000",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen relative">
<Waves {...s} />
</div>
);
}