On Approach

A fixed lead phrase stays while a time phrase swaps down to the closing word today.

Installation
$ pnpm dlx shadcn@latest add @remocn/on-approach

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OnApproach } from "@/components/remocn/on-approach";
 
const OnApproachScene = () => (
  <OnApproach lead="Wheels up" steps={["in June.", "next week.", "tomorrow.", "today."]} interval={30} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="OnApproach"
    component={OnApproachScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

The lead phrase holds still while each entry in steps swaps in, counting closer to the last one. Pass lead, steps and interval to set the countdown. It ships in light and dark through the theme prop.

Props7

PropTypeDefault
lead
string"Wheels up"

Phrase that stays in place.

steps
string[]—

Time phrases swapped in order.

interval
number30

Frames between swaps.

accent
string—

Accent color override; falls back to the theme accent.

background
string—

Background color override; falls back to the theme background.

speed
number1

Playback speed multiplier for the whole timeline.

theme
"dark" | "light""dark"

Ships light and dark; picks the palette.

  • leadstring

    Phrase that stays in place.

    Default"Wheels up"

  • stepsstring[]

    Time phrases swapped in order.

  • intervalnumber

    Frames between swaps.

    Default30

  • accentstring

    Accent color override; falls back to the theme accent.

  • backgroundstring

    Background color override; falls back to the theme background.

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1

  • theme"dark" | "light"

    Ships light and dark; picks the palette.

    Default"dark"