Orbiting Circles

Circular animation with orbiting items.

• 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.