# Rank Climb
URL: https://remocn.dev/docs/numbers/rank-climb

A ranked list reorders as the brand climbs from a low position to number one, with vote counts.

- Install: `npx shadcn@latest add @remocn/rank-climb`
- Vibe: social
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rank-climb
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RankClimb } from "@/components/remocn/rank-climb";

const RankClimbScene = () => (
  <RankClimb brand="remocn" from={8} to={1} eyebrow="Product of the day" caption="on the leaderboard" />
);

export const RemotionRoot = () => (
  <Composition
    id="RankClimb"
    component={RankClimbScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The list builds, then the brand's row overtakes the rows above it one at a time, speeding up, until it lands at the target rank and the win callout settles. Pass `items` (label and votes), `brand` (a label from the list), `from`, `to`, `eyebrow` and `caption`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `RankItem[]` | `DEFAULT_ITEMS` | Entries with label and vote count; the brand row is picked from these. |
| `brand` | `string` | `"remocn"` | Label of the entry that climbs. |
| `from` | `number` | `8` | Starting rank of the brand, 1 is the top. |
| `to` | `number` | `1` | Final rank of the brand. |
| `eyebrow` | `string` | `"Product of the day"` | Small line above the winning rank. |
| `caption` | `string` | `"on Product Hunt"` | Line shown beside the final rank. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A launch-day beat showing the product reaching the top of a ranking.
- A leaderboard climb where other entries step aside one by one.
- A social-proof moment with an eyebrow and a short caption on the win.

## Don't use when
- You show a live race with gaps and laps — use `timing-tower`.
- You show a new top entry in an arcade table — use `high-score`.
- You show growth over time on a curve — use `growth-line`.