# Upvote Burst
URL: https://remocn.dev/docs/social/upvote-burst

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

- Install: `npx shadcn@latest add @remocn/upvote-burst`
- Vibe: playful
- Natural length: 103f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `product` | `UpvoteProduct` | `DEFAULT_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` | `number` | `5` | Rank your product starts at, before climbing to first. |
| `startVotes` | `number` | `412` | Vote count shown when the count starts to climb. |
| `endVotes` | `number` | `1342` | 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` | `number` | `1` | 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. |

## Use when
- A launch-day ranking beat where your product overtakes rivals as votes tick up.
- Showing a vote or upvote count rising while a cursor presses the button.
- Ending a launch video on a "Product of the day" style badge.

## Don't use when
- The list is a generic ranked table with no vote button or badge — use `leaderboard-climb`.
- You only want the rank to move up a chart — use `rank-climb`.
- The win is a repository star count — use `github-stars`.