> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Orbiting Circles

> Circular animation with orbiting items.

* **Location**: `sabo/src/components/ui/orbiting-circles.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "180px", pointerEvents: "none" }}
      title="Orbiting Circles"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
*{box-sizing:border-box}body{margin:0;background:#ffffff;display:flex;justify-content:center;align-items:center;height:160px}
.c{position:relative;width:140px;height:140px;border-radius:9999px}
.d{position:absolute;inset:0;border-radius:9999px;animation:rot 8s linear infinite}
.p{position:absolute;width:10px;height:10px;border-radius:9999px;background:#111827;top:0;left:50%;transform:translate(-50%,-50%)}
.d:nth-child(2){animation-duration:12s}
.d:nth-child(3){animation-duration:16s}
.d:nth-child(2) .p{background:#9ca3af;top:auto;bottom:0}
@keyframes rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
</style></head><body>
<div class='c'>
  <div class='d'><div class='p'></div></div>
  <div class='d'><div class='p'></div></div>
  <div class='d'><div class='p'></div></div>
</div></body></html>`}
    />
  </div>
</Frame>

## When to use

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

## Usage

```tsx sabo/src/components/ui/orbiting-circles.tsx theme={null}
"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

<ParamField path="children" type="ReactNode">
  The icons or elements to orbit around the center.
</ParamField>

<ParamField path="radius" type="number" default="160">
  Distance from center to orbiting elements in pixels.
</ParamField>

<ParamField path="iconSize" type="number" default="30">
  Size of the orbiting elements in pixels.
</ParamField>

<ParamField path="reverse" type="boolean" default="false">
  Reverse the direction of the orbit.
</ParamField>

<ParamField path="duration" type="number" default="20">
  Animation duration in seconds for one complete orbit.
</ParamField>

<ParamField path="delay" type="number" default="0">
  Delay in seconds before starting the animation.
</ParamField>

<ParamField path="speed" type="number" default="1">
  Animation speed multiplier (higher values make it faster).
</ParamField>

<ParamField path="path" type="boolean" default="true">
  Whether to show the circular path outline.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes applied to the container div.
</ParamField>

## Styling tip

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