Rank Climb

A ranked list reorders as the brand climbs from a low position to number one, with vote counts.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RankClimb } from "@/components/remocn/rank-climb";
 
const RankClimbScene = () => (
  <RankClimb brand="remocn" from={8} to={1} eyebrow="Product of the day" caption="on the leaderboard" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RankClimb"
    component={RankClimbScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

The list builds, then the brand's row overtakes the rows above it one at a time, speeding up, until it lands at the target rank and the win callout settles. Pass items (label and votes), brand (a label from the list), from, to, eyebrow and caption; it ships light and dark through theme.

Props9

Prop	Type	Default
items	RankItem[]DEFAULT_ITEMS Entries with label and vote count; the brand row is picked from these.
brand	string"remocn" Label of the entry that climbs.
from	number8 Starting rank of the brand, 1 is the top.
to	number1 Final rank of the brand.
eyebrow	string"Product of the day" Small line above the winning rank.
caption	string"on Product Hunt" Line shown beside the final rank.
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.

itemsRankItem[]
Entries with label and vote count; the brand row is picked from these.
DefaultDEFAULT_ITEMS
brandstring
Label of the entry that climbs.
Default"remocn"
fromnumber
Starting rank of the brand, 1 is the top.
Default8
tonumber
Final rank of the brand.
Default1
eyebrowstring
Small line above the winning rank.
Default"Product of the day"
captionstring
Line shown beside the final rank.
Default"on Product Hunt"
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