Window Trail

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

Installation

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

Props7

Prop	Type	Default
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	number1 Playback multiplier for the whole timeline
theme	"dark" \| "light""dark" Light or dark palette

fromstring
Outgoing line swept away first; empty skips the exit
Default"Old look."
textstring
Incoming line that replaces it
Default"New look, same product."
taglinestring
Small line that rises in word by word under the text
Default"Repainted in one render."
accentstring
Window color; defaults to orange
backgroundstring
Field color; pass transparent to composite over footage
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Light or dark palette
Default"dark"