Installation
Usage
import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import { File, Settings, Search } from "lucide-react";<div className="relative overflow-hidden h-[500px] w-full">
<OrbitingCircles>
<File />
<Settings />
<File />
</OrbitingCircles>
<OrbitingCircles radius={100} reverse>
<File />
<Settings />
<File />
<Search />
</OrbitingCircles>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | The class name for the component |
children | React.ReactNode | - | The children nodes of the component |
reverse | boolean | false | If true, the animation plays in reverse |
duration | number | 20 | The duration of the animation in seconds |
delay | number | 10 | The delay before the animation starts in seconds |
radius | number | 160 | The radius of the orbit in pixels |
path | boolean | true | If true, a path is displayed for the orbit |
iconSize | number | 30 | The size of the icon in pixels |
speed | number | 1 | The speed of the animation |