MVP Card

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

Installation

$ pnpm dlx 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.

Props9

Prop	Type	Default
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	number1 Playback speed multiplier for the whole timeline.

titlestring
The huge word behind the card.
Default"MVP"
kickerstring
Small label at the top right.
Default"Most valuable player"
eventstring
Event line under the kicker.
Default"Grand final 2026"
rolestring
Role tag next to the logo on the card.
Default"Carry"
numberstring
Player number shown in the portrait corner.
Default"01"
statsMvpStat[]
Stat rows that count up inside the card; set from above value to count down.
accentstring
Small markers such as the kicker tick and stat ticks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1