# Circle Burst

A colored circle bursts out from a point to cover the frame, then a second circle opens from the same point onto the next scene.

```bash
npx shadcn add https://www.reelcn.dev/r/circle-burst.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <AppScreen />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={circleBurst({ origin: { x: 80, y: 20 } })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={60}>
    <NextScreen />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Moving from a point of interest, like a button, logo or face, into the next scene
- Bold, playful scene changes in social clips

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| origin? | `{ x: number; y: number; }` | — | Center of the burst, in percent of the frame. |
| color? | `string` | — | Circle color. Defaults to the theme accent. |
| ringColor? | `string` | — | Thin ring that leads both circles. Defaults to the theme highlight. |