# Ring Align
URL: https://remocn.dev/docs/motion-graphics/ring-align

Concentric dotted rings rotate until their slots align and a beam reveals a word in the channel

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

## Installation

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

## Usage

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

const RingAlignScene = () => <RingAlign word="Aligned." rings={6} />;

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

Rings of dots spin from offset angles and lock one by one, outer ring first, each with a small settle. Once the last ring locks, a bright beam sweeps through the aligned channel and leaves your `word` filled in a gradient. Pass `word` and `rings` (3 to 9). Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Aligned."` | Word revealed in the channel once every slot lines up. |
| `rings` | `number` | `6` | Number of concentric rings, from 3 to 9. |
| `accent` | `string` | `"#3B5BFD"` | Color of the period at the end of the word. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |

## Use when
- A reveal of a single word ("Aligned.") that should feel like a lock clicking into place.
- A product beat about alignment, sync or precision, where rings snap one by one.
- A clean title moment with a graphic backdrop instead of a photo.

## Don't use when
- You want a physical lock-in of parts into a shape — use `orbit-lock`.
- The word should be revealed through a gate or slot — use `letter-gate`.
- You want a soft glass reveal rather than rings — use `fluted-glass`.