About
Sine Wave Dots animation
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sine Wave Dots to your project and fits it to your theme.
Code
How Sine Wave Dots is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
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>
);
}