Sports Broadcast Stats

About this style

In the 1990s, US networks began keeping the score and clock on screen for the whole game, and that small persistent graphic became known as the score bug. Modern packages are designed as systems: one grid, one angle, a condensed typeface with tabular figures, team colors in fixed slots and a single build grammar, so every graphic enters and exits the same way. Real-time graphics engines fill them from live stats feeds during the game, and the same look carries over to arena screens and social clips.

Make a 10-second broadcast graphics package for a fictional basketball game: a matchup open, a score bug, a player stat card and head-to-head team bars.

<inputs>
- Network: Courtside 9.
- Home: Ridgeport Comets (RC), cobalt #1F5BFF with gold #F6C945. Away: Thornvale Foxes (TF), vermilion #E8452C.
- Halftime score: Comets 58, Foxes 51.
- Player: Noor Castellan, #7, guard, Comets. First half: 18 PTS, 6 REB, 5 AST, 7/11 FG, 3/5 3PT, 1/2 FT.
- First-half team stats, Comets vs Foxes: FG 22/42 (52.4%) vs 19/43 (44.2%); 3PT 9/21 (42.9%) vs 6/20 (30.0%); FT 5/7 (71.4%) vs 7/9 (77.8%); rebounds 24 vs 19; assists 14 vs 9; turnovers 5 vs 8.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: graphite #0F1014; panels #17191F at 94% with a 1px top edge of white at 8%; white #F5F6F8; muted #9AA1AD; the team colors above. Team colors only ever mean their team; gold is the package's single accent.
Type: Sofia Sans Extra Condensed 800 italic, uppercase, for names, numbers and headings (matchup scores 220px, team names 96px, player name 112px, stat values 72px, headings 40px tracked 0.04em); Sofia Sans 600 for labels (22–26px, uppercase, tracked 0.1em). Every number uses tabular figures; if the font lacks them, set each digit in a fixed-width cell.
One angle: every slanted edge, wipe and mask runs at 12° off vertical. Nothing else is slanted and nothing rotates.
Background: a full-frame studio graphic, not a game feed. Graphite with a faint court diagram (center circle, keys and three-point arcs as 2px lines of white at 6%), split by one 12° seam into a home field on the left (cobalt fading into graphite, at 35%) and an away field on the right (vermilion, likewise), plus a soft 240px band of white at 5% drifting slowly across.
Layout: 96px sides, 60px top and bottom, everything on an 8px grid. Score bug at (96, 60), 560×72: a team-color cell per side with code and score, and HALF in gold. Player card 1600×720 at (160, 200). Head-to-head panel 1520×680 at (200, 200).
Build grammar, the same for every graphic: a 10px team-color edge slices in along the angle (0.18s); the panel wipes in behind it through a skewed clip (0.32s, cubic-bezier(0.7, 0, 0.2, 1)); text slams in (scale 1.12 → 1 with 24px of travel, 0.18s, cubic-bezier(0.2, 0.9, 0.3, 1)); numbers count up (0.6s, cubic-bezier(0.16, 1, 0.3, 1)); then one light sweep (a 120px band of white at 14%, slanted to the angle) crosses the panel in 0.5s. Exits reverse in 0.2s. Transitions between graphics are three full-height slabs (cobalt, graphite, vermilion) sweeping across along the angle, 50ms apart, 0.45s each, with the cut hidden behind them.
Team marks are drawn in code: 132px roundels in the team color with a 6px inner ring and the initials in the italic 800.
Player card: a 520px outline numeral 7 (3px cobalt stroke at 45%) behind the name on the left half; the name, then "GUARD · RIDGEPORT COMETS" at 26px; on the right half six tiles (220×150, 16px gaps, two rows of three): PTS 18, REB 6, AST 5, FG 7/11, 3PT 3/5, FT 1/2; under them a thin bar filled to FG 63.6%.
Head-to-head: roundels and codes at each end of a header row reading "FIRST HALF · TEAM STATS"; six 80px rows (FG%, 3PT%, FT%, REB, AST, TOV) with the label in a 200px center column, the home value at the left, the away value at the right, and bars growing outward from the center column, each side's length set by its share of the pair. The leader of each row (for TOV, the lower count) shows full team color; the other side sits at 40%.
The real thing is a system: one grid, one angle, one build grammar, team colors in fixed slots and numbers that add up. The cheap version is chrome bevels, lens flares and a different swoosh on every graphic.
Banned: bevels, chrome, gloss, lens flares, particles, glitch effects, any angle besides 12°, bouncy or elastic easing, real leagues, teams, players or logos, a third accent color, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.5s: the slab stack sweeps across graphite and reveals the split background.
0.5–2.0s: matchup open: the roundels slam in at (520, 400) and (1400, 400); team names build beneath them; a gold HALFTIME chip builds at the top center (y 200); the scores count 0 → 58 and 0 → 51 at 220px below the names.
2.0–2.6s: the open collapses: codes, scores and the chip travel in straight lines into the score bug at the top left, which stays for the rest of the piece.
2.6–5.2s: the player card builds in the package grammar: the outline numeral draws, the name slams in, the tiles count up 80ms apart, the FG bar fills, the light sweep crosses.
5.2–5.7s: slab transition; the card is gone when the slabs clear.
5.7–8.2s: the head-to-head panel builds: the header row, then the six rows 90ms apart, bars growing from the center column as their values count.
8.2–8.8s: a gold chip slides out under the panel, centered at y 928: "COMETS LEAD 5 OF 6".
8.8–10.0s: hold: score bug, head-to-head panel and chip, everything still, the drifting band parked.
For other durations, stretch the holds inside each graphic, never the builds, and keep at least 1s of final hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. No other libraries (no three.js: this style is flat). Use absolutely positioned elements, setting transforms, clip-paths and opacity from seek; the court lines and roundels can be inline SVG. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Counters are functions of t, formatted every frame. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Also seek a few in-between times to see wipes and slabs mid-move. Check every slant shares the same 12°, text stays inside its panel, the score bug is never covered, team colors never swap sides, and every number and leader highlight matches the inputs. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

KPI Dashboard Reveal

Made by us

A light analytics dashboard builds itself from fictional data that adds up: counters roll on tabular figures, sparkline…

Editorial Data Story

Made by us

A newspaper-grade animated chart: serif headline and dek, a two-line chart that draws year by year, a shaded 2020 band,…

Broadcast Lower Thirds

Made by us

A crisp live-sports graphics package over a soft-focus stadium feed: score bug with running clock, layered lower third,…

AI Chat Product Demo

Made by us

A warm, light chat app: a cursor types a question about three coffee shops, the assistant streams its answer word by wo…