# Ruler Scrub
URL: https://remocn.dev/docs/numbers/ruler-scrub

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

- Install: `npx shadcn@latest add @remocn/ruler-scrub`
- Vibe: premium
- Natural length: 124f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `number` | `2012` | Value the scrub starts from. |
| `to` | `number` | `2026` | Value the ruler lands on. |
| `step` | `number` | `1` | 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` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A year or version reveal where a ruler scrubs past ticks and decelerates until the headline number, such as 2026, lands in the centre.
- A 'the year launch videos became code' style statement that needs a big gradient numeral with a short label beneath.
- A milestone beat where a value runs from a start to an end on a measuring scale, for example 0 to 100 with a custom format.

## Don't use when
- The target is a calendar date rather than a single number — use `launch-date`.
- You want a number counting up with digits rolling, not a scale scrubbing under a marker — use `compact-stat`.
- You want a mission-clock countdown to zero — use `t-minus`.