# Score Bug
URL: https://remocn.dev/docs/numbers/score-bug

A broadcast score bug counts a 2-0 full-time result between Remocn and the old way

- Install: `npx shadcn@latest add @remocn/score-bug`
- Vibe: playful
- Natural length: 82f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/score-bug
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScoreBug } from "@/components/remocn/score-bug";

const ScoreBugScene = () => (
  <ScoreBug
    away="Old way"
    score={2}
    scorers={["Install 12′", "Ship 47′"]}
  />
);

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

A broadcast score panel opens with the Remocn block on the left and an opponent block on the right. The home digit flips once per goal and a scorer line drops in under the block each time. After the last goal a gradient flash band sweeps across, the tab changes to the full-time label and the opponent dims. Pass `away`, `score`, `scorers` and `flash`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `away` | `string` | `"Old way"` | The opponent's name, set in caps on the right block. The left block is always the Remocn logo. |
| `score` | `number` | `2` | Goals Remocn scores, one digit flip each. |
| `awayScore` | `number` | `0` | The opponent's score, shown from the start. |
| `scorers` | `string[]` | `["Install 12′", "Ship 47′"]` | One scorer line per goal, under the Remocn block. Use the prime for minutes: "Ship 47′". |
| `flash` | `string` | `"Shipped"` | Word on the flash band that sweeps across after the last goal. |
| `liveLabel` | `string` | `"Live · 2nd half"` | Tab label while the match runs. |
| `finalLabel` | `string` | `"Full time"` | Tab label once the band has passed. |
| `accent` | `string` | `"#3B5BFD"` | The live marker in the tab and the scorer ticks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A launch beat framed as a match result where the product beats the old way, in the style of a sports broadcast score bug.
- A before-and-after story told as a final scoreline with one scorer line per milestone.
- A playful closing beat that ends on a bold 'Shipped' flash and a full-time tab.

## Don't use when
- You want a plain animated number with no sports framing — use `combo-counter`.
- The comparison is a diagonal two-sided layout with stat rows for time and cost — use `versus-split`.
- The video is serious or enterprise in tone, where a sports metaphor would feel off — use `timer-duel`.