Components
Loading preview...
Sine Wave Dots animation
npx shadcn@latest add https://21st.dev/r/talen-520/sine-wave-dots
import { SineWaveDots } from "@/components/ui/sine-wave-dots";
export default function DemoOne() {
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={20}
dotRadius={1.5}
amplitude={30}
frequency={0.015}
speed={0.003}
/>
</div>
</div>
);
}