Upvote Burst

A launch leaderboard ranks products, your row climbs past rivals to number one and a badge stamps in

Installation

$ pnpm dlx shadcn@latest add @remocn/upvote-burst

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { UpvoteBurst } from "@/components/remocn/upvote-burst";
 
const UpvoteBurstScene = () => (
  <UpvoteBurst
    product={{ name: "Kitebase", tagline: "Launch videos from code", topic: "Video" }}
    startRank={4}
    startVotes={380}
    endVotes={1300}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="UpvoteBurst"
    component={UpvoteBurstScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

A leaderboard sheet slides in with your product at startRank. A cursor presses the upvote, the vote count climbs from startVotes to endVotes, your row swaps past each rival above it, and a badgeLabel stamp lands with captions. Pass product and rivals (name, tagline, topic, optional src image) and the vote numbers. Ships light and dark via theme.

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

Props13

Prop	Type	Default
product	UpvoteProductDEFAULT_PRODUCT Your product row: name, tagline, topic, optional color, glyph, src.
rivals	UpvoteRival[]DEFAULT_RIVALS Competing rows above and below, each with a vote count.
startRank	number5 Rank your product starts at, before climbing to first.
startVotes	number412 Vote count shown when the count starts to climb.
endVotes	number1342 Vote count after the climb; must beat the top rival.
title	string"Top products launching today" Heading at the top of the sheet.
dateLabel	string"Thu, Oct 23" Date label in the sheet header.
badgeLabel	string"Product of the day" Text on the final badge stamp.
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Color of your product tile and the vote button.
speed	number1 Playback speed multiplier for the whole timeline.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.

productUpvoteProduct
Your product row: name, tagline, topic, optional color, glyph, src.
DefaultDEFAULT_PRODUCT
rivalsUpvoteRival[]
Competing rows above and below, each with a vote count.
DefaultDEFAULT_RIVALS
startRanknumber
Rank your product starts at, before climbing to first.
Default5
startVotesnumber
Vote count shown when the count starts to climb.
Default412
endVotesnumber
Vote count after the climb; must beat the top rival.
Default1342
titlestring
Heading at the top of the sheet.
Default"Top products launching today"
dateLabelstring
Date label in the sheet header.
Default"Thu, Oct 23"
badgeLabelstring
Text on the final badge stamp.
Default"Product of the day"
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
accentstring
Color of your product tile and the vote button.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.