About
Animated floating particles component.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sparkles to your project and fits it to your theme.
Code
How Sparkles is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { Sparkles } from "@/components/ui/sparkles";
const settings = {
density: 800,
speed: 1,
opacitySpeed: 3,
size: 1.2,
opacity: 1,
color: "#FFFFFF",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen bg-black">
<Sparkles
className="h-full w-full"
density={s.density}
speed={s.speed}
opacitySpeed={s.opacitySpeed}
size={s.size}
opacity={s.opacity}
color={s.color}
/>
</div>
);
}
Dependencies
More in Heroes
View all
SaaS Template
2.4K
Responsive Hero Banner
2K
Hero
1.2K
Centered Hero with Image Fan
931
Editorial Collage Hero
430
Glass Fold
212
Minimalist Hero Fashion
285
HeroSectionWithGradient
336
