Pitch Over

A big number counts up above a ruler of ticks while a marker slides along it.

Installation

$ pnpm dlx shadcn@latest add @remocn/pitch-over

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PitchOver } from "@/components/remocn/pitch-over";
 
const PitchOverScene = () => <PitchOver value={7200} label="Frames rendered, T+04:00" />;
 
export const RemotionRoot = () => (
  <Composition
    id="PitchOver"
    component={PitchOverScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A large number counts up while a ruler of major and minor ticks draws beneath it; at the end a marker turns and slides along the ruler, then a caption fades in below. Pass value with decimals, prefix or suffix as needed, and label; accent colors the marker. It ships light and dark through theme.

Props10

Prop	Type	Default
value	number7200 The number the count lands on.
from	number0 Starting number of the count.
decimals	number0 Decimal places shown while counting.
prefix	string"" Text before the number.
suffix	string"" Text after the number.
label	string"Frames rendered, T+04:00" Caption that fades in under the ruler.
accent	string— Color of the ruler marker; defaults to the theme ink.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default7200
fromnumber
Starting number of the count.
Default0
decimalsnumber
Decimal places shown while counting.
Default0
prefixstring
Text before the number.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption that fades in under the ruler.
Default"Frames rendered, T+04:00"
accentstring
Color of the ruler marker; defaults to the theme ink.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"