# Play of the Game
URL: https://remocn.dev/docs/logo-stings/play-of-the-game

A banner slices in, the logo slams in as the player, then a stat plate flashes with a gradient highlight.

- Install: `npx shadcn@latest add @remocn/play-of-the-game`
- Vibe: playful
- Natural length: 58f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/play-of-the-game
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PlayOfTheGame } from "@/components/remocn/play-of-the-game";

const PlayOfTheGameScene = () => (
  <PlayOfTheGame
    title="Play of the game"
    role="Solo builder"
    stat="Shipped in 6 hours"
    highlight="6 hours"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PlayOfTheGame"
    component={PlayOfTheGameScene}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A banner with `title` slices in over the Remocn logo, which slams in as the player with a `role` label beneath. Then `stat` flashes on its own plate with `highlight` filled in the accent gradient and a final sweep. The player is always the Remocn logo. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Play of the game"` | Banner call that slices in first. |
| `role` | `string` | `"Solo builder"` | Small role label under the player. |
| `stat` | `string` | `"Shipped in 6 hours"` | Highlight stat flashed on its own plate. |
| `highlight` | `string` | `"6 hours"` | Part of the stat filled with the gradient; must appear in stat. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the role tick and gradient. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A playful recap or hero-stat beat for a solo-builder launch, like shipped in 6 hours.
- A gaming-flavoured social clip that celebrates a milestone.
- A credit for a person or product with one number worth bragging about.

## Don't use when
- You need a calm, premium brand reveal — use `introducing`.
- A single large numeral should be the hero — use `sequel-numeral`.
- You want fast rhythmic word cuts instead of a banner — use `blink-cut`.