Sparkles
Particle sparkle effect using tsparticles. Creates ambient floating particles behind or around content.
Preview
Sparkles
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
IO-UI home page hero section and feature highlight backgrounds.
Why this component matters
Motion with meaning. Sparkles create atmospheric depth without competing with content. They reward attention without demanding it.
Usage guidance
Use behind hero text or as an accent layer on dark backgrounds. Never use over dense content or data-heavy layouts. Pairs well with large, light-weight typography.
Installation
bash
npx shadcn@latest add @aceternity/sparklesUsage
example.tsxtsx
import { Sparkles } from "@/components/ui/sparkles";
export default function Example() {
return (
<Sparkles>
{/* Your content here */}
</Sparkles>
);
}Source
sparkles.tsx
components/ui/sparkles.tsx