# Bracket Win
URL: https://remocn.dev/docs/product-scenes/bracket-win

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

- Install: `npx shadcn@latest add @remocn/bracket-win`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A launch hook framed as a competition, where the product wins every round and ends on a champion plate.
- A short poster-style beat celebrating a win, award or number one result with a bold gradient burst.
- A video that needs a quick, high-energy payoff after a build-up of rivals or alternatives.

## Don't use when
- The win is a ranking climb up a list, not a bracket — use `upvote-burst` instead.
- You want bracket-shaped framing around a product name with no match play — use `bracket-index` instead.
- You need a data-rich dashboard to prove results — use `live-dashboard` instead.