Ring Burst

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

Installation

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

Props8

Prop	Type	Default
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	number20 Frames the outgoing scene holds before the burst
accent	string"#3B5BFD" Color of the outermost ring
speed	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Tone the incoming scene lands on

fromReact.ReactNode
Outgoing scene: a short headline or any React node
Default"Before."
toReact.ReactNode
Incoming scene carried in by the last ring
Default"remocn"
origin[number, number]
Burst point as fractions of the frame, x then y
Default[0.5, 0.5]
colorsstring[]
Ring colors, outermost first, up to three
delaynumber
Frames the outgoing scene holds before the burst
Default20
accentstring
Color of the outermost ring
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Tone the incoming scene lands on
Default"dark"