Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Orbiting Circles

Orbiting Circles

A collection of circles which move in orbit along a circular path

Circles

Installation

npx shadcn@latest add "https://magicui.design/r/orbiting-circles"

Props

PropTypeDefaultDescription
classNamestring-The class name for the component
childrenReact.ReactNode-The children nodes of the component
reversebooleanfalseIf true, the animation plays in reverse
durationnumber20The duration of the animation in seconds
delaynumber10The delay before the animation starts in seconds
radiusnumber160The radius of the orbit in pixels
pathbooleantrueIf true, a path is displayed for the orbit
iconSizenumber30The size of the icon in pixels
speednumber1The speed of the animation