Components
Configurable animated particle field for hero highlights, card backgrounds, and decorative UI layers with optional pointer interaction.
Loading preview...
import { Sparkles } from "@/components/ui/sparkles";
export default function SparklesDemo() {
return (
<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-xl bg-black">
<Sparkles
background
color="#e5f4ff"
count={48}
density="high"
interactive
/>
<h1 className="relative z-10 text-center text-5xl font-bold tracking-tight text-white sm:text-7xl">
Build great products
</h1>
</div>
);
}