# Replay Wipe
URL: https://remocn.dev/docs/transitions/replay-wipe

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

- Install: `npx shadcn@latest add @remocn/replay-wipe`
- Vibe: tech
- Natural length: 102f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `18` | 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` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- A sports or event style recap in a launch video, cutting from a live moment to its replay.
- A high-energy cut between two shots that should feel like a TV graphics package.
- Highlighting one moment twice, once at speed and once in slow motion.

## Don't use when
- The scenes need a quiet or editorial change — use `hairline-open`.
- You want a lateral camera move between shots — use `whip-pan`.
- You need a single clean swap with no stinger graphic — use `slide-swap`.