High Score

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

Installation

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

Props8

Prop	Type	Default
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	number999990 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	number1 Playback speed multiplier; 1 is the designed pace.

rowsHighScoreEntry[]
The table before the new run, best first. Up to five rows are shown.
playerstring
Initials typed in once the new score lands at the top.
Default"RMC"
playerScorenumber
The new score. Should beat the current #1.
Default999990
titlestring
Small table title shown before the flash.
Default"HIGH SCORES"
flashstring
The flash that replaces the title once the initials are in.
Default"NEW HIGH SCORE"
accentstring
Small cursor block while the initials are typed.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1