particle-circle-default
import { ParticleCircle } from "@/components/ui/backgrounds/particle-circle"
export function Component() {
return (
<div className="">
<ParticleCircle
colors={["#9c88ff", "#7c3aed", "#a855f7", "#c084fc"]}
particleSize={[1, 5]}
particleCount={1500}
size={400}
/>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/particle-circle-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/particle-circle.json
Usage
import { ParticleCircle } from "@/components/ui/particle-circle"<div className="relative h-screen w-full overflow-hidden">
<ParticleCircle
colors={["#9c88ff", "#7c3aed", "#a855f7", "#c084fc"]}
particleSize={[1, 5]}
particleCount={1500}
size={400}
/>
<div className="absolute inset-0 z-10 flex items-center justify-center">
<p className="text-xl font-semibold">Content over particle circle</p>
</div>
</div>API Reference
ParticleCircle
A configurable animated particle circle component.
| Prop | Type | Default | Description |
|---|---|---|---|
particleCount | number | Responsive (1000 on small screens, 2000 on large) | Number of particles to render. |
shrinkDuration | number | 8 | Duration (seconds) for shrinking phase. |
growDuration | number | 8 | Duration (seconds) for growing phase. |
colors | string[] | ["#393e46", "#00adb5", "#393e46", "#00adb5", "#e6eeef"] | Array of particle colors. |
baseRadius | number | 0.35 | Base radius multiplier relative to canvas size. |
particleSize | [number, number] | [2, 8] | Range for particle size. |
enableBlendMode | boolean | true (disabled in Firefox) | Whether to use SCREEN blend mode for vibrant colors. |
size | number | Auto (min(windowWidth, windowHeight)) | Custom width/height of the canvas. |