Ruler Scrub

A ruler scrubs past ticks until the year 2026 lands in a gradient numeral

Installation

$ pnpm dlx shadcn@latest add @remocn/ruler-scrub

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RulerScrub } from "@/components/remocn/ruler-scrub";
 
const RulerScrubScene = () => (
  <RulerScrub
    from={2012}
    to={2026}
    label="The year launch videos became code"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RulerScrub"
    component={RulerScrubScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A ruler fades in and scrubs quickly past its ticks, decelerating with a small settle until the final value sits under the centre mark with a flash. The ruler then drops lower and the value enlarges into a gradient numeral with a label fading in beneath. Pass from, to, step, format and label. It ships light and dark through the theme prop.

Props8

Prop	Type	Default
from	number2012 Value the scrub starts from.
to	number2026 Value the ruler lands on.
step	number1 Value difference between neighbouring ticks.
format	string \| ((value: number) => string)"{value}" Template with {value}, or a function, to format each number.
label	string"The year launch videos became code" Line under the final value.
accent	string"#3B5BFD" Colour of the centre marker and lit ticks.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

fromnumber
Value the scrub starts from.
Default2012
tonumber
Value the ruler lands on.
Default2026
stepnumber
Value difference between neighbouring ticks.
Default1
formatstring | ((value: number) => string)
Template with {value}, or a function, to format each number.
Default"{value}"
labelstring
Line under the final value.
Default"The year launch videos became code"
accentstring
Colour of the centre marker and lit ticks.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1