Replay Wipe

A broadcast stinger wipes from a live shot to a slow-motion replay and back

Installation

$ pnpm dlx shadcn@latest add @remocn/replay-wipe

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ReplayWipe } from "@/components/remocn/replay-wipe";
 
const ReplayWipeScene = () => (
  <ReplayWipe
    accent="#3B5BFD"
    wipeAt={[26, 84]}
    wipeLength={18}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ReplayWipe"
    component={ReplayWipeScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

A huge LIVE frame with a ticking clock holds, then a stinger carrying the Remocn R mark spins across on a fluted gradient streak and wipes to the Replay shot in slow motion, then wipes back. Pass your own shots as from and to, set the frames with wipeAt and tune the stinger with wipeLength; it ships light and dark.

Props7

Prop	Type	Default
from	React.ReactNode— Shot before the first wipe; defaults to a Live broadcast frame
to	React.ReactNode— Shot after the first wipe; defaults to a slow-motion Replay frame
wipeAt	number[][26, 84] Frames where a wipe starts; shots alternate from, to, from
wipeLength	number18 Frames the stinger takes to cross the frame
accent	string"#3B5BFD" Color of the live marker in the default shot
theme	"dark" \| "light""dark" Light or dark palette
speed	number1 Playback multiplier for the whole timeline

fromReact.ReactNode
Shot before the first wipe; defaults to a Live broadcast frame
toReact.ReactNode
Shot after the first wipe; defaults to a slow-motion Replay frame
wipeAtnumber[]
Frames where a wipe starts; shots alternate from, to, from
Default[26, 84]
wipeLengthnumber
Frames the stinger takes to cross the frame
Default18
accentstring
Color of the live marker in the default shot
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette
Default"dark"
speednumber
Playback multiplier for the whole timeline
Default1