Sports scoreboard graphics from JSON — broadcast templates in HTML

If you run a league, a podcast, or a sports media account, you produce scoreboards. Every game, every recap, every social cut. The typical workflow — open After Effects, drop in team logos, type the score, render, repeat — collapses at any volume above a single match per day.

The fix is the same as for any high-volume graphic: template the bug, drive the variants from JSON, render in batch. Here is the engineering build of a broadcast-grade scoreboard, including the timing rules that make it read as TV instead of as a website.

What a "score bug" actually is

A broadcast score bug, stripped of network branding, is six pieces of information:

1. Team A: logo, abbreviation, score
2. Team B: logo, abbreviation, score
3. Period / quarter / inning indicator
4. Game clock
5. Optional: possession indicator, count, runners on base
6. Optional: status banner ("HALFTIME," "FINAL," "TIMEOUT")

Six fields. The visual variation across networks is mostly typography and which fields are present — the underlying structure is the same.

The 16:9 lower-third layout

A score bug lives in the lower-left or lower-right corner of the frame, occupying about 22% of the width and 8% of the height. Two stacked rows, one per team, each row split into logo / abbreviation / score.

The accent color on BOS's score is doing important work — it tells the eye "they just scored." Use a brand color for the team that most recently put points on the board, fade it back to white after 3 seconds. This is the "scoring blink" — every network does it.

The team variable

Two teams, each with logo (image URL), abbreviation, full name, color. A JSON entry looks like:

{
  "id": "match-2026-05-12-nyc-bos",
  "period": "Q3",
  "clock": "04:21",
  "status": "live",
  "home": { "abbr": "NYC", "color": "#ff3b1f", "logo": "/teams/nyc.svg", "score": 21 },
  "away": { "abbr": "BOS", "color": "#1f5fff", "logo": "/teams/bos.svg", "score": 17 },
  "highlightTeam": "away"
}

The template reads this JSON and renders. To produce a recap reel for the day, loop the JSON file over every match and render one MP4 per game.

Score transitions

When the score changes during a render, the digit should not snap — it should swap with motion. The two patterns that work:

• Slot-machine roll (digits scroll vertically). Use for fast-paced sports where score changes constantly (basketball).
• Crossfade (old digit fades down, new fades up). Use for slow-paced (baseball, golf, soccer).

A 250ms duration for either. Anything longer and the score change reads as a glitch instead of an update.

Status banners

Halftime, full-time, timeout, ejection — these are "interrupts" that take over the bug for 3–5 seconds. Implement them as a third stacked module that slides in from the right, sits, then slides out.

The slide is short — 250ms — and uses the same ease curve as the score change. Consistency in motion timing is what makes a graphic package read as a system rather than a collection.

Recap videos: render in batch

The bigger win is the post-game recap. Render thirty 6-second clips, one per scoring play, each with the corresponding bug state. Stitch them in your editor. The bug stays consistent across every clip because every render came from the same template.

For full recap automation, see batch personalized videos — the orchestration pattern is identical.

What you give up by templating

Network broadcasts have one thing this approach doesn't: a dedicated graphics operator who tweaks the bug live based on context. You will not have that. The trade is throughput — one template, one engineer, every game covered.

For 95% of league media and 100% of social cuts, that trade is correct.

Open the playground, drop the score bug in, render the recap reel for last week's games.