Sine Wave Dots

import { SineWaveDots } from "@/components/ui/sine-wave-dots";

const settings = {
  gap: 20,
  dotRadius: 1.5,
  amplitude: 30,
  frequency: 0.015,
  speed: 0.003,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="w-full min-h-[400px] flex flex-col items-center justify-center bg-white dark:bg-black p-4">
      <h1 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-50 mb-3">
        Sine Wave Dots Animation
      </h1>

      <div className="w-full max-w-3xl">
        <SineWaveDots
          className="opacity-50"
          dotColor="fill-gray-500 dark:fill-gray-400"
          gap={s.gap}
          dotRadius={s.dotRadius}
          amplitude={s.amplitude}
          frequency={s.frequency}
          speed={s.speed}
        />
      </div>
    </div>
  );
}