# Pitch Over
URL: https://remocn.dev/docs/numbers/pitch-over

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

- Install: `npx shadcn@latest add @remocn/pitch-over`
- Vibe: tech
- Natural length: 86f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `7200` | The number the count lands on. |
| `from` | `number` | `0` | Starting number of the count. |
| `decimals` | `number` | `0` | 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` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A measured value, such as frames rendered or seconds saved, that should feel gauged against a scale.
- A technical or engineering stat beat with a one-line caption under the ruler.
- A count that finishes with a small mechanical flourish before the caption arrives.

## Don't use when
- You want a dimension-line comparison of two values - use `measure-dim`.
- The year or version is the star and should be scrubbed to - use `ruler-scrub`.
- A plain count with no scale device is enough - use `compact-stat`.