# Window Trail
URL: https://remocn.dev/docs/transitions/window-trail

An orange window sweeps up over the old line and drags the new line in behind it

- Install: `npx shadcn@latest add @remocn/window-trail`
- Vibe: clean
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/window-trail
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WindowTrail } from "@/components/remocn/window-trail";

const WindowTrailScene = () => (
  <WindowTrail
    from="Old look."
    text="New look, same product."
    tagline="Repainted in one render."
  />
);

export const RemotionRoot = () => (
  <Composition
    id="WindowTrail"
    component={WindowTrailScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The `from` line sits on the field, then an orange window is thrown up over it, leaving a short trail of stamps. The `text` line is then dragged up from the bottom of the frame the same way, and the `tagline` rises in word by word underneath. Pass your own `from`, `text` and `tagline`; it ships light and dark, and the motion ends at frame 86 at speed 1.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"Old look."` | Outgoing line swept away first; empty skips the exit |
| `text` | `string` | `"New look, same product."` | Incoming line that replaces it |
| `tagline` | `string` | `"Repainted in one render."` | Small line that rises in word by word under the text |
| `accent` | `string` | — | Window color; defaults to orange |
| `background` | `string` | — | Field color; pass transparent to composite over footage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette |

## Use when
- A before-and-after beat such as an old look versus a new look, or a rename or rebrand.
- A single replacement of one statement with another, with a short tagline following.
- A punchy, graphic swap that works as a title card with no imagery.

## Don't use when
- The old text should be visibly struck out rather than painted over — use `strikethrough-replace`.
- You want a wipe that splits the frame between two scenes — use `diagonal-split`.
- The new line should type in rather than sweep — use `typewriter`.