Gradient Dots

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gradient Dots to your project and fits it to your theme.

import { 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>
	);
}