Radial Burst

$ pnpm dlx 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.

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}:

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.

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.

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