# High Score
URL: https://remocn.dev/docs/numbers/high-score

A pixel arcade table inserts a new top entry, 'NEW HIGH SCORE', above four lower scores

- Install: `npx shadcn@latest add @remocn/high-score`
- Vibe: playful
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/high-score
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HighScore } from "@/components/remocn/high-score";

const HighScoreScene = () => <HighScore player="YOU" playerScore={999990} flash="NEW HIGH SCORE" />;

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

A pixel-font leaderboard slides in, then a new score races up the table, shoving each row down as it overtakes it. At the top the score lands with a shake, the initials type in behind a block cursor and a flash line slams in before the logo rises. Pass `rows` for the existing scores, plus `player`, `playerScore` and `flash` to make it yours. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rows` | `HighScoreEntry[]` | — | The table before the new run, best first. Up to five rows are shown. |
| `player` | `string` | `"RMC"` | Initials typed in once the new score lands at the top. |
| `playerScore` | `number` | `999990` | The new score. Should beat the current #1. |
| `title` | `string` | `"HIGH SCORES"` | Small table title shown before the flash. |
| `flash` | `string` | `"NEW HIGH SCORE"` | The flash that replaces the title once the initials are in. |
| `accent` | `string` | `"#3B5BFD"` | Small cursor block while the initials are typed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A launch beat that frames shipping as beating the old record, with a player climbing an arcade leaderboard to the top slot.
- A playful gaming-flavoured teaser where a new score slams in as the headline 'NEW HIGH SCORE'.
- A milestone moment where the product overtakes a ranked list of rivals before a closing logo.

## Don't use when
- The rank change should read as a real-world leaderboard or product ranking, not a retro arcade — use `rank-climb`.
- You want a single hero number counting up with no table around it — use `combo-counter`.
- The scene needs a calm, premium tone rather than pixel-arcade energy — use `stat-sequence`.