Timing Tower
A racing timing tower reorders lap by lap until the hero reaches P1, then settles into a poster with the gap.
$ pnpm dlx shadcn@latest add @remocn/timing-towerUsage
// src/Root.tsx
import { Composition } from "remotion";
import { TimingTower } from "@/components/remocn/timing-tower";
const TimingTowerScene = () => (
<TimingTower code="RMC" lap={41} laps={58} interval="+12.408" intervalLabel="Gap to P2" />
);
export const RemotionRoot = () => (
<Composition
id="TimingTower"
component={TimingTowerScene}
durationInFrames={165}
fps={30}
width={1280}
height={720}
/>
);The tower wipes in with ten cars, then the hero car passes the car ahead each lap while the gaps rewrite, until it turns purple at P1. The tower then peels off and a poster with the code and the interval counts in. Pass code, field, lap, laps, interval and intervalLabel; it ships light and dark through theme.
Props9
| Prop | Type | Default |
|---|---|---|
| code | string"RMC" Three-letter code of the hero car that climbs to P1. | |
| field | string[]— The nine other cars, leader first. The hero starts behind the seventh. | |
| lap | number41 Lap the tower opens on. One lap ticks per overtake. | |
| laps | number58 Race distance shown after the slash in the lap counter. | |
| interval | string"+12.408" Gap to P2 shown on the final poster. | |
| intervalLabel | string"Gap to P2" Small label over the poster interval. | |
| accent | string"#3B5BFD" Color of the live dot in the tower header. | |
| theme | "dark" | "light""dark" Color theme, "dark" or "light". | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- codestring
Three-letter code of the hero car that climbs to P1.
Default
"RMC" - fieldstring[]
The nine other cars, leader first. The hero starts behind the seventh.
- lapnumber
Lap the tower opens on. One lap ticks per overtake.
Default
41 - lapsnumber
Race distance shown after the slash in the lap counter.
Default
58 - intervalstring
Gap to P2 shown on the final poster.
Default
"+12.408" - intervalLabelstring
Small label over the poster interval.
Default
"Gap to P2" - accentstring
Color of the live dot in the tower header.
Default
"#3B5BFD" - theme"dark" | "light"
Color theme, "dark" or "light".
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1