# Leaderboard Climb
URL: https://remocn.dev/docs/product-scenes/leaderboard-climb

A launch leaderboard where the highlighted row climbs the table to a top rank

- Install: `npx shadcn@latest add @remocn/leaderboard-climb`
- Vibe: data
- Natural length: 90f @ 30fps

## Installation

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

## Usage

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

const LeaderboardClimbScene = () => (
  <LeaderboardClimb
    title="Top launches"
    toRank={3}
    self={{ name: "remocn", tagline: "Launch videos from code", from: 598, to: 1284 }}
  />
);

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

A leaderboard panel lists up to eight products, then the highlighted row starts at the bottom and climbs past them one by one while its score counts up. It lands on a rank-up badge. Pass your own `entries`, `self` (name, tagline, start and end score) and `toRank`. It ships dark and light through the `theme` prop.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light panel styling. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the highlighted row. |
| `title` | `string` | `"Top launches"` | Panel title in the header. |
| `subtitle` | `string` | `"Today · Launch league"` | Small line under the panel title. |
| `entries` | `LeaderboardEntry[]` | — | Competing rows with name, tagline and score; the first eight are used. |
| `self` | `{ name: string; tagline: string; from: number; to: number }` | — | Your row: name, tagline, and the scores it climbs from and to. |
| `toRank` | `number` | `3` | Rank the highlighted row ends on, counting from 1. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A launch recap showing the product climbing a daily ranking after a launch day push.
- A social-proof beat where a highlighted row passes competitors one by one while its score counts up.
- A vertical or landscape clip that ends on a rank-up badge such as how many places gained.

## Don't use when
- You want the climb to end with a number one badge stamp — use `upvote-burst` instead.
- You need a bracket-style elimination story, not a ranked list — use `bracket-win` instead.
- You want large animated stats with no table — use `stat-sequence` instead.