Speed Trap

A speed readout locks on 348 km/h over a segmented bar with last year's marker and delta

Installation

$ pnpm dlx shadcn@latest add @remocn/speed-trap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpeedTrap } from "@/components/remocn/speed-trap";
 
const SpeedTrapScene = () => (
  <SpeedTrap
    value={348}
    previous={300}
    unit="km/h"
    banner="Top speed"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpeedTrap"
    component={SpeedTrapScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

A three-sector bar track snaps out and the readout floods up to the final value while a gradient bar races with it. On lock the number kicks, a banner wipes in, last year's mark drops onto the bar and the delta slice and comparison line appear. Pass value, previous, max and unit. It ships light and dark through the theme prop.

Props11

Prop	Type	Default
value	number348 Speed the readout locks on.
previous	number300 Last year's mark, drawn as a line on the bar. The delta is computed from it.
max	number360 Full scale of the bar.
unit	string"km/h" Unit after the number.
banner	string"Top speed" Banner that flashes when the readout locks.
previousLabel	string"2025" Label on the previous mark.
comparison	string"vs last year" Text after the delta, e.g. "vs last year".
label	string"Speed trap · Sector 3" Small label at the top left.
accent	string"#3B5BFD" The live dot next to the label.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

valuenumber
Speed the readout locks on.
Default348
previousnumber
Last year's mark, drawn as a line on the bar. The delta is computed from it.
Default300
maxnumber
Full scale of the bar.
Default360
unitstring
Unit after the number.
Default"km/h"
bannerstring
Banner that flashes when the readout locks.
Default"Top speed"
previousLabelstring
Label on the previous mark.
Default"2025"
comparisonstring
Text after the delta, e.g. "vs last year".
Default"vs last year"
labelstring
Small label at the top left.
Default"Speed trap · Sector 3"
accentstring
The live dot next to the label.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1