# MVP Card
URL: https://remocn.dev/docs/numbers/mvp-card

A player card slams open beside a giant gradient MVP word while three stats count up on the card.

- Install: `npx shadcn@latest add @remocn/mvp-card`
- Vibe: playful
- Natural length: 62f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/mvp-card
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MvpCard } from "@/components/remocn/mvp-card";

const MvpCardScene = () => (
  <MvpCard title="MVP" role="Carry" number="01" stats={[{ value: 12.4, decimals: 1, label: "Renders / min" }, { value: 100, suffix: "%", label: "Uptime" }]} />
);

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

The card slams up and opens from its centre line, the giant title rises letter by letter behind it, and the logo, role and event lines slide in. Three stats then count in a stagger. Pass `title`, `kicker`, `event`, `role`, `number` and `stats`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"MVP"` | The huge word behind the card. |
| `kicker` | `string` | `"Most valuable player"` | Small label at the top right. |
| `event` | `string` | `"Grand final 2026"` | Event line under the kicker. |
| `role` | `string` | `"Carry"` | Role tag next to the logo on the card. |
| `number` | `string` | `"01"` | Player number shown in the portrait corner. |
| `stats` | `MvpStat[]` | — | Stat rows that count up inside the card; set from above value to count down. |
| `accent` | `string` | `"#3B5BFD"` | Small markers such as the kicker tick and stat ticks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A community or contributor spotlight styled like a sports award card.
- A launch beat that celebrates a person, team or product as the MVP of the release.
- Three headline stats that should count up inside a card, one of them counting down.

## Don't use when
- The beat is a ranking against competitors — use `timing-tower`.
- You only need a single stat — use `compact-stat`.
- You want a head-to-head result — use `score-bug`.