# Ring Cut
URL: https://remocn.dev/docs/transitions/ring-cut

Concentric colored rings expand from a chosen point and the last ring carries in the next scene

- Install: `npx shadcn@latest add @remocn/ring-cut`
- Vibe: premium
- Natural length: 57f @ 30fps

## Installation

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

## Usage

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

const RingCutScene = () => (
  <RingCut
    from="One idea"
    to="Now live"
    origin={{ x: 0.2, y: 0.74 }}
    accent="#3B5BFD"
  />
);

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

The `from` headline holds, then a sequence of rings in alternating tones and thin lines expands from `origin`. The last ring carries the `to` scene across the frame and it settles into place; `to="remocn"` sets the Remocn logo. Place `origin` as fractions of the frame, for example on the control that triggers the cut. With the default origin the scene settles by frame 57.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"One idea"` | Outgoing headline |
| `to` | `string` | `"remocn"` | Incoming headline; Remocn sets the logo |
| `origin` | `{ x: number; y: number }` | `{ x: 0.2, y: 0.74 }` | Center of the expanding rings as fractions of the frame |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark stage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- Swapping a short statement for a logo or closing line with a circular reveal from a chosen point.
- A cut that should originate from a button, a cursor position or a corner of the frame.
- A clean graphic transition with ring lines, not a blur or a glow.

## Don't use when
- You want a soft glow of light rather than hard rings — use `bloom-ring`.
- You want a burst of filled color rings from the center — use `ring-burst`.
- A single shape growing out of the text is a better fit — use `shape-cut`.