# Radial Burst
URL: https://remocn.dev/docs/effects/radial-burst

Sculptural ribbons twist into a tilted ring and sweep outward through layered contour echoes

- Install: `npx shadcn@latest add @remocn/radial-burst`
- Vibe: playful
- Natural length: 114f @ 30fps

## Installation

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

## Usage

`RadialBurst` is a four-second sculptural stinger. A small circle bursts into
wide, tapered ribbons that twist through an asymmetric bloom. Fine contour
echoes trace their movement while a warm accent picks out a few petals. The
ribbons fold into a tilted ring, compress, then sweep outward through layered
rings to leave a clean field for the next title, logo, or scene.

```tsx
import { RadialBurst } from "@/components/remocn/radial-burst";

export const Intro = () => <RadialBurst />;
```

The default palette is white and warm cream on Remocn's primary purple. No text, logo,
images, fonts, or shaders are included. SVG geometry, springs, and curves are
derived directly from the Remotion frame, so seeking and rendering are
deterministic. The geometry scales with the shorter composition dimension;
the exit uses the full diagonal to clear portrait, square, and wide frames.

## Timing and title handoff

At 30 fps and `speed={1}`:

| Frames | Motion |
| --- | --- |
| 0–18 | Central circle enters with a small overshoot |
| 18–44 | Ribbons burst outward, stretching into broad petals |
| 44–84 | Ribbons twist through a tilted bloom, then close into a ring |
| 84–96 | Ring contracts to anticipate the exit |
| 96–114 | Ring and contour echoes expand out of frame |
| 114–120 | Clean background |

Place a title above the animation as the ring opens up. This example shares
the purple background and uses the burst as a transparent overlay.

```tsx
import { AbsoluteFill, Sequence } from "remotion";
import { RadialBurst } from "@/components/remocn/radial-burst";

export const ProductIntro = () => (
  <AbsoluteFill style={{ backgroundColor: "#a800b7" }}>
    <RadialBurst backgroundColor="transparent" />
    <Sequence from={108}>
      <AbsoluteFill style={{
        alignItems: "center",
        justifyContent: "center",
        color: "#ffffff",
        fontFamily: "Arial, sans-serif",
        fontSize: 88,
        fontWeight: 600,
      }}>
        Introducing something new
      </AbsoluteFill>
    </Sequence>
  </AbsoluteFill>
);
```

`radialBurstLength` is 114 frames, the point where all shapes have left.
`getRadialBurstDuration({ speed })` includes the clean tail and returns the
duration at 30 fps. Multiply by `fps / 30` and round up for another frame rate.
The docs preview adjusts its duration when speed changes. Enable `loop` to
repeat the full 120-frame cycle; otherwise the background stays clear after
the first pass.

## Variations

Use four segments for broad, sculptural shapes or twelve for a dense radial
pattern. `intensity` controls ribbon swelling, asymmetric movement, and plane
tilt. Set it to `0` for the original flat capsule-to-ring animation. `twist`
changes the ribbon bend; negative values curl in the opposite direction.
`echoes={0}` removes the contour trails. Negative `rotation` reverses the
assembly. `radius` and `thickness` are measured at a 720px reference size and
scale with the composition.

```tsx
<RadialBurst
  segments={6}
  radius={240}
  thickness={24}
  rotation={-180}
  intensity={1.2}
  twist={140}
  echoes={3}
  color="#a800b7"
  backgroundColor="#faf5ff"
  speed={1.25}
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `segments` | `number` | `8` | Rounded segment count, clamped to 4–16 and rounded to an integer |
| `radius` | `number` | `210` | Burst radius at 720px, clamped to 100–280 |
| `thickness` | `number` | `30` | Segment thickness at 720px, clamped to 8–60 |
| `rotation` | `number` | `135` | Assembly rotation in degrees; negative values reverse it |
| `intensity` | `number` | `1` | Ribbon swelling, asymmetric movement, and tilt; 0 restores classic geometry, maximum 1.5 |
| `twist` | `number` | `110` | Ribbon bend in degrees, from -180 to 180 |
| `echoes` | `number` | `3` | Contour echo count, from 0 to 5 |
| `accentColor` | `string` | `"#f4e4a7"` | Warm accent on selected ribbons and exit echoes |
| `color` | `string` | `"#ffffff"` | Circle, segment, and ring color |
| `backgroundColor` | `string` | `"#a800b7"` | Full-frame background; use transparent for an overlay |
| `speed` | `number` | `1` | Playback multiplier; 0 freezes the initial frame |
| `loop` | `boolean` | `false` | Repeat the entire animation, including its clean tail |
| `className` | `string` | — | Optional class name on the full-frame root |

## Use when
- A product introduction needs a short abstract geometric opening before its title.
- A motion-design stinger should build anticipation and leave a clean frame for the next beat.
- A brand-colored animation needs editable segment count, rotation, and scale without external assets.

## Don't use when
- The effect should celebrate an action with scattered particles — use `confetti`.
- Two complete scenes need a camera move through concentric rings — use `ripple-zoom`.
- The introduction should be driven by editable words — use `kinetic-morph-text`.