Sports Scorebug
Broadcast score furniture with a live clock and scores that land.
SceneScenes
$ npx remotion-ui@latest add sports-scorebugThe bug wipes in from its own edge, the game clock counts down live off
clockSeconds, and points listed in changes land mid-scene — bumping the
total and flashing that side rather than silently swapping the number.
Each entry in changes is a side, a time in seconds, and the points to add, so
the scores you pass in home and away are the values at the top of the scene,
not the final ones. Anything not yet reached simply has not happened at that
frame.
It renders nothing but the bug, so overlay it straight onto footage. align
moves it to whichever corner the frame leaves free, and holdSeconds retreats it
the way it came.
Transparent overlay scene designed to sit over footage. Points landing mid-scene bump the total and flash that side rather than silently swapping the number.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/sports-scorebug- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: home, away, period, clockSeconds, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { SportsScorebug } from "@/remotion/scenes/sports-scorebug";
<SportsScorebug
away={{ abbr: "NOR", score: 66, color: "#7DD3E8" }}
home={{ abbr: "VAL", score: 71, color: "#E8B86D", possession: true }}
period="Q4"
clockSeconds={154}
changes={[{ side: "away", atSeconds: 1.1, points: 3 }]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| home* | ScorebugTeam | - | Home side — abbreviation, score, colour, possession. |
| away* | ScorebugTeam | - | Away side — abbreviation, score, colour, possession. |
| period | string | "Q3" | Period furniture — Q3, 2ND HALF, SET 2. |
| clockSeconds | number | 154 | Game clock at the top of the scene, in seconds. Counts down. |
| changes | ScoreChange[] | [] | Scores landing mid-scene. Each flashes its side and bumps the total. |
| align | "left" | "center" | "right" | "center" | Edge the bug sits against. |
| accentColor | string | "#E8B86D" | Period label and possession dot colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| holdSeconds | number | - | Seconds the bug holds before it retreats. Omit to leave it up. |
| speed | number | 1 | Animation speed multiplier. |