# Gear Shift
URL: https://remocn.dev/docs/numbers/gear-shift

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

- Install: `npx shadcn@latest add @remocn/gear-shift`
- Vibe: playful
- Natural length: 82f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `42` | The final number the count lands on. |
| `from` | `number` | `0` | The number the count starts from. |
| `decimals` | `number` | `0` | 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` | `number` | `4` | 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` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A speed or momentum beat where a number accelerates through numbered gear steps, getting heavier and larger with each shift.
- A stat on a bold coloured panel, with a gear indicator beside it and a caption, for a performance claim.
- A figure that should feel like it is revving up before it lands with a small jolt.

## Don't use when
- You want a single smooth ease with no stepped feel — use `compact-stat`.
- You want the count to land on musical beats — use `beat-count`.
- You want a slam-in from zero with no stepping — use `smash-count`.