# Level Up
URL: https://remocn.dev/docs/numbers/level-up

A segmented XP bar fills from flying chips, bursts into a LEVEL UP call, rolls the level digit, then shows a stat.

- Install: `npx shadcn@latest add @remocn/level-up`
- Vibe: playful
- Natural length: 106f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/level-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LevelUp } from "@/components/remocn/level-up";

const LevelUpScene = () => (
  <LevelUp level={41} title="LEVEL UP" stat={{ label: "Render speed", value: 40, suffix: "%" }} />
);

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

The XP bar builds, XP chips fly into it one by one until it maxes out and collapses, then the title erupts with rays and a shockwave and the level digit rolls to the next number. A stat line ticks up last. Pass `level`, `startXp`, `maxXp`, `chips` (they should add up to `maxXp - startXp`), `title` and `stat`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `level` | `number` | `41` | Level before the level-up. The new level is this plus one. |
| `startXp` | `number` | `2800` | XP already in the bar when the shot opens. |
| `maxXp` | `number` | `4000` | XP needed to reach the next level. |
| `chips` | `number[]` | `[120, 240, 180, 300, 360]` | One chip per entry, each flying XP into the bar. |
| `title` | `string` | `"LEVEL UP"` | Big call that erupts when the bar maxes out. |
| `stat` | `{ label: string; value: number; suffix?: string }` | — | Stat line that ticks up at the end, with label, value and optional suffix. |
| `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 gaming-flavoured launch beat that frames a major release as a level-up.
- A milestone beat with a stat chip, such as a render-speed gain, as the payoff.
- A hype moment in a release video that needs a burst, a rolled number and one stat.

## Don't use when
- The milestone is a plain version number — use `version-hero`.
- You want a quiet, premium reveal instead of a burst — use `plus-open`.
- The moment is a leaderboard or ranking climb — use `rank-climb`.