# Ring Burst
URL: https://remocn.dev/docs/transitions/ring-burst

Concentric colored rings burst outward from a point and the last ring carries in the next scene

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

## Installation

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

## Usage

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

const RingBurstScene = () => (
  <RingBurst
    from="Before."
    to="Now live."
    accent="#3B5BFD"
    origin={[0.5, 0.5]}
  />
);

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

The `from` headline holds for `delay` frames on the opposite tone. Then up to three colored rings burst out from `origin` in quick succession, and the last ring lands the `to` scene, with a soft halo around it. Pass `from` and `to` as short text or any React node; `to="remocn"` sets the Remocn logo, and `theme` picks the tone the incoming scene lands on. The burst lands at frame 65 with the default delay.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `React.ReactNode` | `"Before."` | Outgoing scene: a short headline or any React node |
| `to` | `React.ReactNode` | `"remocn"` | Incoming scene carried in by the last ring |
| `origin` | `[number, number]` | `[0.5, 0.5]` | Burst point as fractions of the frame, x then y |
| `colors` | `string[]` | — | Ring colors, outermost first, up to three |
| `delay` | `number` | `20` | Frames the outgoing scene holds before the burst |
| `accent` | `string` | `"#3B5BFD"` | Color of the outermost ring |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Tone the incoming scene lands on |

## Use when
- Swapping a short headline for a logo or closing statement with a punchy, centered burst.
- A launch video ending that needs a single beat to land the brand mark.
- A hit-and-reveal cut where the burst point can be placed on a button or object.

## Don't use when
- You want a soft glow rather than solid rings — use `bloom-ring`.
- You need a cut that expands cleanly with no color rings — use `ring-cut`.
- The reveal should come from horizontal bands rather than a point — use `band-shift`.