Gear Shift

A big 42 shifts up through numbered gear steps on a teal panel with a caption

Installation

$ pnpm dlx shadcn@latest add @remocn/gear-shift

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GearShift } from "@/components/remocn/gear-shift";
 
const GearShiftScene = () => <GearShift value={42} gears={4} label="scenes in one launch film" />;
 
export const RemotionRoot = () => (
  <Composition
    id="GearShift"
    component={GearShiftScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A coloured side panel with numbered gear steps fades in beside a number that counts from from to value. Each gear is a faster, heavier-weight stretch of the count, with a small jolt at every shift and a final landing jolt on the top gear. A caption sits in the panel. Pass value, from, label and gears. It ships light and dark through the theme prop.

Props11

Prop	Type	Default
value	number42 The final number the count lands on.
from	number0 The number the count starts from.
decimals	number0 Decimal places shown on the number.
prefix	string"" Text placed before the number, such as a currency sign.
suffix	string"" Text placed after the number, such as a unit.
label	string"scenes in one launch film" Caption shown in the panel.
gears	number4 Number of gear steps, from 2 up to the number of font weights available.
accent	string— Colour of the side panel.
background	string— Stage colour; pass 'transparent' to layer over other footage.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

valuenumber
The final number the count lands on.
Default42
fromnumber
The number the count starts from.
Default0
decimalsnumber
Decimal places shown on the number.
Default0
prefixstring
Text placed before the number, such as a currency sign.
Default""
suffixstring
Text placed after the number, such as a unit.
Default""
labelstring
Caption shown in the panel.
Default"scenes in one launch film"
gearsnumber
Number of gear steps, from 2 up to the number of font weights available.
Default4
accentstring
Colour of the side panel.
backgroundstring
Stage colour; pass 'transparent' to layer over other footage.
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"