Bracket Win

A tournament bracket resolves match by match until Remocn is crowned CHAMPION

Installation

$ pnpm dlx shadcn@latest add @remocn/bracket-win

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BracketWin } from "@/components/remocn/bracket-win";
 
const BracketWinScene = () => (
  <BracketWin title="CHAMPION" caption="Season one" theme="dark" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BracketWin"
    component={BracketWinScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

Eight slots slide in, quarterfinals, semifinals and the final resolve in turn with scores ticking in, then the final node bursts into a gradient plate that slams in the champion title and logo. Pass your own opponents, title, caption and rounds labels. It ships dark and light through the theme prop.

Props7

Prop	Type	Default
opponents	string[]— Seven opponent names in bracket order; the product holds the top-left seed.
title	string"Champion" Word on the champion plate.
caption	string"Playoffs 2026 · 8 teams · 0 maps dropped" Small line shown under the champion plate.
rounds	[string, string, string]— Three round labels: quarterfinal, semifinal and final.
accent	string"#3B5BFD" Color of the winner ticks on matches the product is not in.
theme	"dark" \| "light""dark" Dark or light stage styling.
speed	number1 Playback speed multiplier for the whole timeline.

opponentsstring[]
Seven opponent names in bracket order; the product holds the top-left seed.
titlestring
Word on the champion plate.
Default"Champion"
captionstring
Small line shown under the champion plate.
Default"Playoffs 2026 · 8 teams · 0 maps dropped"
rounds[string, string, string]
Three round labels: quarterfinal, semifinal and final.
accentstring
Color of the winner ticks on matches the product is not in.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light stage styling.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1