Timer Duel

Two stopwatch timers run side by side, the faster one ending on 38x faster

Installation

$ pnpm dlx shadcn@latest add @remocn/timer-duel

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TimerDuel } from "@/components/remocn/timer-duel";
 
const TimerDuelScene = () => (
  <TimerDuel
    before={2718.4}
    after={70.9}
    beforeLabel="Before"
    afterLabel="With remocn"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TimerDuel"
    component={TimerDuelScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Two stopwatch readouts start together. The faster one stops first and lights up in the accent colour, then the slower one runs on, slows and freezes dimmed. The row rises and a large multiplier such as '38x faster' lands below it. Pass before and after in seconds, and beforeLabel and afterLabel to name the two clocks. It ships light and dark through the theme prop.

Props8

Prop	Type	Default
before	number2718.4 Duration of the slower run, in seconds.
after	number70.9 Duration of the faster run, in seconds.
beforeLabel	string"Before" Label under the slower clock.
afterLabel	string"With remocn" Label under the faster clock.
delta	string— Text of the big result line. Defaults to the computed ratio, e.g. '38× faster'.
accent	string"#3B5BFD" Colour of the faster clock once it stops.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

beforenumber
Duration of the slower run, in seconds.
Default2718.4
afternumber
Duration of the faster run, in seconds.
Default70.9
beforeLabelstring
Label under the slower clock.
Default"Before"
afterLabelstring
Label under the faster clock.
Default"With remocn"
deltastring
Text of the big result line. Defaults to the computed ratio, e.g. '38× faster'.
accentstring
Colour of the faster clock once it stops.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1