Leaderboard Climb

A launch leaderboard where the highlighted row climbs the table to a top rank

Installation

$ pnpm dlx shadcn@latest add @remocn/leaderboard-climb

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LeaderboardClimb } from "@/components/remocn/leaderboard-climb";
 
const LeaderboardClimbScene = () => (
  <LeaderboardClimb
    title="Top launches"
    toRank={3}
    self={{ name: "remocn", tagline: "Launch videos from code", from: 598, to: 1284 }}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LeaderboardClimb"
    component={LeaderboardClimbScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A leaderboard panel lists up to eight products, then the highlighted row starts at the bottom and climbs past them one by one while its score counts up. It lands on a rank-up badge. Pass your own entries, self (name, tagline, start and end score) and toRank. It ships dark and light through the theme prop.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props9

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light panel styling.
accent	string"#3B5BFD" Accent color for the highlighted row.
title	string"Top launches" Panel title in the header.
subtitle	string"Today · Launch league" Small line under the panel title.
entries	LeaderboardEntry[]— Competing rows with name, tagline and score; the first eight are used.
self	{ name: string; tagline: string; from: number; to: number }— Your row: name, tagline, and the scores it climbs from and to.
toRank	number3 Rank the highlighted row ends on, counting from 1.
ground	GshPresetId— Gradient shader preset id for the background.
groundParams	Partial<GradientParams>— Overrides for the shader preset parameters.

theme"dark" | "light"
Dark or light panel styling.
Default"dark"
accentstring
Accent color for the highlighted row.
Default"#3B5BFD"
titlestring
Panel title in the header.
Default"Top launches"
subtitlestring
Small line under the panel title.
Default"Today · Launch league"
entriesLeaderboardEntry[]
Competing rows with name, tagline and score; the first eight are used.
self{ name: string; tagline: string; from: number; to: number }
Your row: name, tagline, and the scores it climbs from and to.
toRanknumber
Rank the highlighted row ends on, counting from 1.
Default3
groundGshPresetId
Gradient shader preset id for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.