Components
Loading preview...
A lively field of tiny, colorful dots that shimmer, shift, and cycle through the rainbow. Powered by Framer Motion for smooth endless animation and customizable spacing, size, and speed.
npx shadcn@latest add https://21st.dev/r/sshahaider/gradient-dotsimport { GradientDots } from "@/components/ui/gradient-dots";
export default function DefaultDemo() {
return (
<main className="relative flex size-full min-h-screen w-full items-center justify-center">
<GradientDots duration={20} />
<h1 className="text-6xl text-center font-extrabold z-10">Gradient Dots</h1>
</main>
);
}