# Orbit (goodtabs UI)

Items on a slowly turning ring, sized by the chord between neighbours.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/orbit.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/orbit`

## Usage

```tsx
import { Orbit } from "@/components/ui/orbit"

<Orbit items={[<Box key="b" />, <Globe key="g" />]}>stack</Orbit>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `ReactNode[]` |  | One node per item, placed evenly on the ring. |
| radius | `number` | `72` | Ring radius in px. |
| duration | `number` | `40` | Seconds for one full turn. |
| children | `ReactNode` |  | Content in the centre. |

## When to use

- Showing integrations or a stack around a central idea
- A calm decorative accent in a hero or feature section

## When not to use

- Content people must read or click, the items are decorative
- More than about twelve items, they get too small

## Notes for agents

- Client component using the Web Animations API, no library
- The still state is the unrotated ring. It stops under reduced motion and when scrolled off screen
- Items counter-rotate so icons stay upright. Give them aria-hidden icons or labels as needed
- Item size is capped at 40px and at 80 percent of the chord

## The maths

- Item i of n sits at θ = -90deg + i × 360deg / n, at x = cos θ × r and y = sin θ × r.
- Neighbour centres are the chord 2r × sin(180deg / n) apart: 2 × 72 × sin(22.5deg) = 55.1px for n = 8.
- Item size = min(0.8 × chord, 40), so neighbours keep a gap.

Docs: https://ui.goodtabs.co/components/orbit