Skip to main content
ScoreLayerBlogSprucing up the soccer overlay for the round of 32
by Joachim, founder

Sprucing up the soccer overlay for the round of 32

World Cup upgrades to the soccer overlay: a GOAL celebration, a bigger broadcast-scale scorebug, second-half added time, and instant style switching.

Happy Monday, everyone! The rounds of 32 are well underway and we wanted to spruce things up a bit.

It's been a good week to be a football fan. Penalty shootouts, last-minute winners, a couple of brackets in the office that are now thoroughly ruined. And while we've been watching the tournament like everyone else, we've also been quietly polishing the soccer overlay — the changes below all shipped over the weekend.

None of them are huge. That's kind of the point. These are the small touches that make a Sunday-league stream feel a little more like the broadcast on TV.

When the ball hits the net

The biggest one first: goals now get a celebration.

When you tap the +1 button to add a goal, the scorebar does a quick animated GOAL wipe across the bar — the four letters land one after another in the World Cup brand colours — and then the new score scrolls down into place. It's the kind of flourish that makes a viewer look up from their phone.

A few things we cared about while building it:

It fires from the button you already use. There's no separate "play animation" control to remember in the heat of a match — you add the goal the way you always have, and the celebration comes along for free.

It always plays in full. The animation runs locally on the overlay for its whole duration, so even if your connection hiccups for a moment, the GOAL banner doesn't get cut short. The score itself doesn't pop in early either — it waits for the celebration to finish, then scrolls down, so the reveal lands at the right moment.

And only the team that scored animates. The other side's score sits still. Small detail, but it's the difference between something that feels designed and something that feels like a glitch.

If you're streaming a youth tournament or a local cup, this is the moment your viewers wait for. Now it gets the entrance it deserves. It's also the clip that gets shared afterward — the goal, the celebration, the scoreboard ticking over to 1–0. A clean animation on that moment is the difference between a phone-video memory and something the club actually posts.

And because it's tied to the score button, it works for every goal, all game long. No setup, no resetting between halves, no remembering to arm it before a corner. You run the match; the overlay keeps up.

Bigger, to match the real thing

We also gave the World Cup scorebug a size bump.

Side by side with the actual tournament graphics, our bar was sitting a touch small — fine on a big monitor, but easy to lose on a phone screen, which is where a lot of grassroots streams actually get watched. So we scaled the whole thing up: the flags, the team blocks, the score, the clock, the trophy in the centre. Everything grew together, so the proportions stay true to the design — it's the same bug, just rendered at the scale the broadcast uses.

The difference is most obvious on mobile and on a busy pitch background. Bigger flags and a heftier scoreline punch through grass, advertising boards, and crowd movement far better than a dainty bar ever could. It's the kind of change you don't consciously notice — it just suddenly looks like the telly.

A clock that knows it's the second half

Soccer has a quirk almost no other sport shares: the clock doesn't stop, and it doesn't reset at half time. The second half kicks off at 45:00 and runs all the way to 90:00. Then it keeps going — into stoppage time — while a fourth official holds up a board telling everyone how much has been added.

Our clock now handles all of that properly.

Set the period to 2H and the game clock counts up toward 90:00, not 45:00. Once you pass the 90-minute mark, the main clock holds at 90:00 and a second line appears underneath showing exactly how far into stoppage you are — 5:28, say — alongside the + min. figure the referee signalled. Extra time is handled too: the first extra-time half runs to 105, the second to 120.

It scales if your match doesn't run to full ninety. Streaming 40-minute halves for a youth fixture? Set the half length once and the second-half threshold moves with it — the clock still knows that "the end of regulation" sits at two halves, whatever a half is for your competition.

It's a quiet fix, but it's one of those things that's obviously wrong the moment it's wrong. A second-half clock reading 45:00 when the players are clearly an hour in just looks broken. Now it reads the way the stadium clock reads.

Added time is where it earns its keep. Those final minutes are when a stream is most tense and most watched — someone's chasing an equaliser, the comments are filling up, and everyone wants to know how long is left. Showing 90:00 with a clear stoppage count and the referee's added minutes underneath tells that story at a glance, the same way a televised match does. It's a small amount of information, presented at exactly the moment people care about it most.

Change the look without touching the browser source

The last one is for anyone who's ever wanted to try a different overlay style mid-stream and dreaded the faff.

Previously, switching your overlay style in the control panel didn't show up on the actual overlay until you refreshed the browser source in OBS. Not a disaster, but an interruption — and an easy thing to forget right before you go live.

Now it's instant. Pick a new style in your control panel and the overlay updates on screen straight away — no refresh, no re-adding the source, no re-cropping. The same goes for the live preview in the control panel, so what you see while you're setting up is exactly what your viewers get.

For a small production running a single laptop, that's one less thing to think about. You can audition a couple of looks in the minutes before kickoff and settle on one without ever alt-tabbing into OBS.

How it works under the hood

A quick note for the curious, because a few of you have asked how the overlay stays in sync.

Your scoreboard's state — the scores, the clock, the team names — lives in one place and is pushed to the overlay the instant you change it. The overlay listens for those changes over a live connection, so a tap on your phone shows up on stream in well under a second. The goal celebration rides on the same signal: adding a goal tells every connected overlay to play the animation, then settle on the new score.

The style switch was the missing piece. Your chosen overlay style is stored separately from the live game state, which is why it used to need a refresh — the overlay simply wasn't listening for that particular change. Now it is. Same live connection, same sub-second update, just extended to cover the look as well as the numbers.

You don't need to know any of that to use it. But it's the reason all of this feels immediate rather than "save, refresh, hope."

All on every plan

Everything here is live now, for every soccer scoreboard, on every plan — including free. There's nothing to enable. If you're already using the World Cup style, the goal animation and the smarter clock are simply there the next time you go live. To switch styles, head to your control panel and pick one under your scoreboard settings.

If you missed them, we also shipped two new soccer scorebugs earlier this tournament — Fox Soccer and a stripped-back 94 Classic — and there's a full write-up of the World Cup 2026 style if you want the background on the design.

Enjoy the round of 32 — and may your bracket survive longer than ours did.

Create a soccer scoreboard →

Ready to go live?

Create a free scoreboard and add it to OBS in under 2 minutes — no install required.

Create free scoreboard