Split Flash

A lap-time clock freezes on its final value, flashing a purple bar and a minus delta

Installation

$ pnpm dlx shadcn@latest add @remocn/split-flash

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SplitFlash } from "@/components/remocn/split-flash";
 
const SplitFlashScene = () => (
  <SplitFlash
    time="1:12.408"
    delta="−0.412"
    flashLabel="Fastest lap"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SplitFlash"
    component={SplitFlashScene}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

A lap clock runs with rolling tenths while an accent sector line draws under it. When the line is crossed the clock freezes on its final time, the line shoots up into a full-width purple band that blinks once, and the delta slides down from under it. Pass time as m:ss.mmm, plus delta, label and flashLabel. It ships light and dark through the theme prop.

Props7

Prop	Type	Default
time	string"1:12.408" The time the clock freezes on, `m:ss.mmm`. Anything else is shown static.
delta	string"−0.412" Delta that drops in under the frozen time. Pass "" to hide.
label	string"Lap time" Small label above the clock while it runs.
flashLabel	string"Fastest lap" Label once the clock freezes.
accent	string"#3B5BFD" Colour of the sector line and the live marker.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

timestring
The time the clock freezes on, `m:ss.mmm`. Anything else is shown static.
Default"1:12.408"
deltastring
Delta that drops in under the frozen time. Pass "" to hide.
Default"−0.412"
labelstring
Small label above the clock while it runs.
Default"Lap time"
flashLabelstring
Label once the clock freezes.
Default"Fastest lap"
accentstring
Colour of the sector line and the live marker.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1