Speedrun Timer

A speedrun split table fills row by row against personal bests and ends on a gold world record banner

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpeedrunTimer } from "@/components/remocn/speedrun-timer";
 
const SpeedrunTimerScene = () => (
  <SpeedrunTimer
    category="Launch video · Any%"
    splits={[
      { name: "Script", time: 300, pb: 340 },
      { name: "Edit", time: 900, pb: 950 },
      { name: "Ship", time: 1500, pb: 1620 },
    ]}
    banner="World record"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpeedrunTimer"
    component={SpeedrunTimerScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

The panel slides in with a header and one row per split. The run clock starts, each split locks in with the time and a green or red delta against its personal best, and the last split goes gold before a banner lands. Pass splits (cumulative seconds for time and pb), category and banner; it ships dark and light via theme. The header uses the Remocn wordmark, swap RemocnLogo in the copied file for your own.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props8

Prop	Type	Default
category	string"Launch video · Any%" Category line in the header, after the logo.
splits	SpeedrunSplit[]DEFAULT_SPLITS The splits in order. The last one is the finish and goes gold.
banner	string"World record" The banner that lands when the run finishes.
accent	string"#3B5BFD" Color of the current-split marker.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
speed	number1 Playback speed multiplier for the whole timeline.

categorystring
Category line in the header, after the logo.
Default"Launch video · Any%"
splitsSpeedrunSplit[]
The splits in order. The last one is the finish and goes gold.
DefaultDEFAULT_SPLITS
bannerstring
The banner that lands when the run finishes.
Default"World record"
accentstring
Color of the current-split marker.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
speednumber
Playback speed multiplier for the whole timeline.
Default1