Wave Animation

import { WaveAnimation } from "@/components/ui/wave-animation-1";

const settings = {
  width: 1200,
  height: 600,
  waveSpeed: 3,
  waveIntensity: 50,
  pointSize: 2,
  gridDistance: 2,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <main className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden">
      <span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap">
        Wave Animation
      </span>
      <WaveAnimation
        width={s.width}
        height={s.height}
        waveSpeed={s.waveSpeed}
        waveIntensity={s.waveIntensity}
        particleColor="#fff200"
        pointSize={s.pointSize}
        gridDistance={s.gridDistance}
        className="border rounded-lg"
      />
    </main>
  );
}