Benchmark Race

Lanes race on a shared clock and Remocn finishes first, shown as 12x faster

Installation

$ pnpm dlx shadcn@latest add @remocn/benchmark-race

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BenchmarkRace } from "@/components/remocn/benchmark-race";
 
const BenchmarkRaceScene = () => (
  <BenchmarkRace
    statement="12× faster"
    title="Cold render, 1080p · median of 50 runs"
    lanes={[
      { label: "remocn", seconds: 0.42, highlight: true },
      { label: "Kitebase", seconds: 2.38 },
      { label: "Before", seconds: 5.06 },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BenchmarkRace"
    component={BenchmarkRaceScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Lanes arrive and race on a shared clock; the highlighted lane hits the finish first and its time freezes with a pulse while the others dim and keep crawling. The camera then glides down and the statement rolls in above. Pass lanes (label, seconds, optional highlight), statement and title. Ships dark and light via theme.

Props8

Prop	Type	Default
lanes	BenchmarkLane[]DEFAULT_LANES Lanes to race, each with a label, finish time and optional highlight.
unit	string"s" Suffix on the clocks.
statement	string"12× faster" Lands above the lanes after the hit. A leading number rolls in.
title	string"Cold render, 1080p · median of 50 runs" Small caption over the lanes: what was measured.
decimals	number2 Digits after the decimal point on the clocks.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

lanesBenchmarkLane[]
Lanes to race, each with a label, finish time and optional highlight.
DefaultDEFAULT_LANES
unitstring
Suffix on the clocks.
Default"s"
statementstring
Lands above the lanes after the hit. A leading number rolls in.
Default"12× faster"
titlestring
Small caption over the lanes: what was measured.
Default"Cold render, 1080p · median of 50 runs"
decimalsnumber
Digits after the decimal point on the clocks.
Default2
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"