On Approach
A fixed lead phrase stays while a time phrase swaps down to the closing word today.
$ pnpm dlx shadcn@latest add @remocn/on-approachUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
30 - 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.
Default
1 - theme"dark" | "light"
Ships light and dark; picks the palette.
Default
"dark"