# Chord Ring
URL: https://remocn.dev/docs/motion-graphics/chord-ring

Chords link a ring of integration names around a glowing center that reads a caption

- Install: `npx shadcn@latest add @remocn/chord-ring`
- Vibe: tech
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/chord-ring
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChordRing } from "@/components/remocn/chord-ring";

const ChordRingScene = () => (
  <ChordRing
    segments={["Acme", "Kitebase", "Lumen", "Fernway", "Quarry", "Orbitly"]}
    brandIndex={0}
    caption="Connects to everything"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ChordRing"
    component={ChordRingScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Ring segments grow in around a glowing center, then curved chords draw between them, with the `brandIndex` segment linked to every other one in the accent color. At the end the ring dims and the `caption` lands in the center. Pass up to 12 `segments` names (a segment named "remocn" renders as the Remocn logo) and a `caption`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `segments` | `string[]` | `DEFAULT_SEGMENTS` | Names around the ring. Up to 12 are used. |
| `brandIndex` | `number` | `0` | Index of the segment that links to all the others. |
| `caption` | `string` | `"Connects to everything"` | Line shown in the center at the end. |
| `accent` | `string` | `"#3B5BFD"` | Color of the brand segment chords. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- An integrations beat showing that your product connects with many tools around a central hub.
- A platform or API launch where a ring of partner names reinforces breadth.
- A clean data-viz moment that ends on a one-line promise in the middle.

## Don't use when
- The tools should orbit in a constellation with depth — use `ecosystem-constellation`.
- The connections carry quantities between two sides — use `sankey-flow`.
- You want many items packed into clustered bubbles — use `bubble-pack`.