Level Up

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

Installation

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

Props9

Prop	Type	Default
level	number41 Level before the level-up. The new level is this plus one.
startXp	number2800 XP already in the bar when the shot opens.
maxXp	number4000 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	number1 Playback speed multiplier for the whole timeline.

levelnumber
Level before the level-up. The new level is this plus one.
Default41
startXpnumber
XP already in the bar when the shot opens.
Default2800
maxXpnumber
XP needed to reach the next level.
Default4000
chipsnumber[]
One chip per entry, each flying XP into the bar.
Default[120, 240, 180, 300, 360]
titlestring
Big call that erupts when the bar maxes out.
Default"LEVEL UP"
stat{ label: string; value: number; suffix?: string }
Stat line that ticks up at the end, with label, value and optional suffix.
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1