Penalty Shootout Tracker
Soccer penalty shootout graphic with team identity, live score, and a five-kick tracker for each side.
Team colors live in the accent bars, not the background
Home and away colors show up in the two angled accent bars that bracket the scoreboard, not in the background plate itself. That keeps the bar reading clearly on air no matter which two teams or kits are involved — bright kit colors get their moment without ever working against legibility or contrast.
Green, red, and white dots that grab the eye
Each kick in the five-kick tracker shows as a simple dot — ⚪ before it's taken, 🟢 the moment it's scored, 🔴 the moment it's missed. That trio of colors is what makes the shootout readable at a glance: a row of green and red dots tells the story of the shootout on its own, even with the sound down, and it's the same visual shorthand viewers already know from match graphics and sports apps. Each dot is operator-set via a closed dropdown, not free text — there's no live feed for kick outcomes, and a dropdown makes a mis-typed result structurally impossible.
The score updates with a quick tick, not a flash
When a kick changes the score, the number ticks upward rather than flashing or popping. The goal moment itself is best served by the broadcast's live shot and replay — the graphic's job is to register the change cleanly and get out of the way.
One bar, built for the moment penalties start
There's no running clock module on this graphic, because a shootout doesn't have one — it's kick-by-kick, not time-based. Everything that matters sits on a single bar: team identity, the kick trackers, and the score, read left to right the way the shootout itself unfolds.
homeTeam when a scoreboard feed is connected.awayTeam.homeColor.awayColor.homeScore; updates with a quick tick animation.awayScore.
Ready to use this template?
Open it in the CloudMonet editor to customize and export.