Skip to main content
  • Location: sabo/src/components/ui/orbiting-circles.tsx

​
When to use

  • Decorative orbiting motion for hero backgrounds or metrics.
  • Keep small and sparse to avoid visual noise.

​
Usage

sabo/src/components/ui/orbiting-circles.tsx
"use client";
import { OrbitingCircles } from "@/components/ui/orbiting-circles";

export function Example() {
  return (
    <div className="relative h-64">
      <OrbitingCircles radius={120} iconSize={16}>
        <span className="size-4 rounded-full bg-black dark:bg-white" />
        <span className="size-4 rounded-full bg-neutral-400" />
        <span className="size-4 rounded-full bg-neutral-600" />
      </OrbitingCircles>
    </div>
  );
}

​
Key props

​
children
ReactNode
The icons or elements to orbit around the center.
​
radius
number
default:"160"
Distance from center to orbiting elements in pixels.
​
iconSize
number
default:"30"
Size of the orbiting elements in pixels.
​
reverse
boolean
default:"false"
Reverse the direction of the orbit.
​
duration
number
default:"20"
Animation duration in seconds for one complete orbit.
​
delay
number
default:"0"
Delay in seconds before starting the animation.
​
speed
number
default:"1"
Animation speed multiplier (higher values make it faster).
​
path
boolean
default:"true"
Whether to show the circular path outline.
​
className
string
Additional CSS classes applied to the container div.

​
Styling tip

  • Pair with subtle gradients; keep orbits slow (8–16s) for calm motion.