# Orbiting circles

> Icons orbiting a center on rings, staying upright as they travel.

Component · Pro · https://lodeui.com/components/orbiting-circles

## When to use

- Showing integrations, a platform's ecosystem or connected tools on a landing page.

## When not to use

- Data people need to read: the icons move.

## Installation

```bash
npx shadcn@latest add @lode/orbiting-circles
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { GitBranch, Mail, Zap } from "lucide-react";
import { OrbitingCircles } from "@/components/ui/orbiting-circles";

<OrbitingCircles
  label="Integrations: Git and email"
  center={<Zap />}
  rings={[{ radius: 80, items: [<GitBranch key="g" />, <Mail key="m" />] }]}
/>
```

## API reference

### OrbitingCircles

Concentric rings of items rotating around a center; each item counter-rotates to stay upright.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rings | `OrbitRing[]` | – | { radius, items, duration?, reverse?, itemSize? }. |
| center | `ReactNode` | – | Middle content, e.g. your logo. |
| paths | `boolean` | `true` | Dashed orbit lines. |
| label | `string` | – | What the picture shows; read as one image. |

## Accessibility

- Exposed as one image with your label; the moving parts are hidden.
- Static under reduced motion.

## Motion

- Each ring spins linearly at its own speed; reverse rings counter-rotate.

## Responsive behavior

- Sized from the largest ring; never wider than its container.

## Performance

- One rotation per ring and per item, all transforms.

## Notes for AI

- List the integrations in label so screen-reader users get the same information.

## Related

- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.