Installation
Usage
import { BackgroundCircles } from "@/components/motionx/background-circles";Basic usage
<div className="h-screen w-full">
<BackgroundCircles>
<h1 className="text-4xl font-bold text-foreground">Your Content</h1>
</BackgroundCircles>
</div>Custom color
<BackgroundCircles
color="260 80% 60%"
circleCount={4}
speed={0.5}
variant="intense"
>
<h1 className="text-foreground text-4xl font-bold">Purple Orbits</h1>
</BackgroundCircles>Subtle variant
<BackgroundCircles circleCount={3} variant="subtle" vignette={false}>
<p className="text-muted-foreground">Minimal backdrop</p>
</BackgroundCircles>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered on top of the effect |
className | string | — | Container CSS classes |
circleCount | number | 5 | Number of concentric circles |
color | string | "180 80% 50%" | HSL values for the base color (e.g. "180 80% 50%") |
alternate | boolean | true | Reverse rotation on every other circle |
speed | number | 1 | Speed multiplier — lower is slower |
vignette | boolean | true | Show a radial vignette overlay |
variant | "default" | "subtle" | "intense" | "default" | Controls opacity and scale intensity |
Tip: Pass the
colorprop as HSL values without thehsl()wrapper — e.g."180 80% 50%"for cyan or"260 80% 60%"for purple.