Tigers vs Ravens

A basketball broadcast package that reskins to any two teams in minutes. Arena screens, ribbon boards and the TV feed, all running off one set of data.

Built in a week for Rive's broadcast and livestream UI challenge, where the brief was to make interfaces that respond to data as an event happens.

The idea

I didn't want to make a set of elements. What I wanted was whole pieces of video that rewrite themselves while they play. A celebration that becomes a different player. A win sequence that becomes the other team. Something you set up once and then feed, instead of re-rendering a version for every case.

That turned out to be achievable, and it changed how I built everything else.

First I had to invent two teams

There was no brief and no client, so the identity was mine to make up. Tigers and Ravens, purple against orange.

The device I landed on was the eye. A single tiger eye and a single raven eye. They carry the team identity without needing a full mascot, and they hold up on a ribbon board as well as they do in the corner of a score bug.

Both are rigged, so they blink. Small thing, but these graphics are otherwise very geometric and it gives the win sequences something alive to sit on.

That slot is data bound like everything else, so a real club can put their own artwork in it. A mascot, a piece of their crest, a wordmark. Rig it once and the package carries their identity.

Two surfaces

Graphics appear in two places during a game.

There's the TV feed. Score bug, lower thirds, leaderboard, comparison panel. These are informational, and someone is trying to watch a game through them, so they stay out of the way.

Then there's the building. The centre hung screen, the ribbon boards that wrap the balcony. These are competing with twenty thousand people. Their job is to get a crowd going, so they can be much louder.

I built both, off the same data.

The package

Game day opener

Full screen for the main arena display, with a matching ribbon version running across the fascia at the same time.

Score bug

Team abbreviations, scores, quarter, game clock and shot clock. The clocks run live rather than being animated, and the shot clock switches to tenths under five seconds the way a real one does. The team eyes sit either side.

Lower third

Player name, number, headshot and three stats, all data bound. The same graphic covers any player on either roster.

Three point celebration

The one I'm happiest with as a piece of animation. Full screen for the main display, with its own ribbon version, both reading from the same data.

Leaderboard

Player cards have three states depending on where they sit in the standings, and they animate between those states as positions change. When the points update the board reorders itself, and the cards move and morph at the same time instead of snapping into place.

Comparison panel

Six stat rows, two bars each. A script reads both raw values and sets the lengths by comparing them to each other, so whichever team leads fills its bar and the other sits proportionally behind. If you scale against a fixed maximum instead, low count stats like steals come out as two identical stubs and the row stops telling you anything.

It also flips for stats where a lower number is better, like turnovers. Without that the team playing worse gets the longer bar, which real broadcast graphics get wrong more often than you'd expect.

Win sequences

One for each team, full screen and ribbon, fully data bound.

The ribbons were their own design problem

A ribbon board is an extreme shape. Nothing composed for a 16:9 frame survives being stretched that long. Type stops being readable, composition collapses, and anything centred just floats.

So I redrew them. Same message, different layout, built on Rive Layouts so they stretch to whatever width they're given.

Everything runs off data

Nothing is typed into an artboard. Player names, numbers and stats live in a view model. Colours, logos and team names sit alongside.

So there's one version of each graphic, and two sets of data feeding it. Switching teams takes a couple of minutes.

The three pointer shows it best. The main screen artboard and the ribbon artboard read from the same view model, so changing the player updates both at once. You can watch the ribbon change while I never open that file.

Animating this much in Rive

These pieces have a lot of layers. The opener and the win sequences especially, with stacked type, masks, gradients and repeated elements all running together.

Rive handled playback better than I expected. Scrubbing stayed responsive at layer counts where After Effects would have started dropping frames and pushing me to pre-render. Being able to keep working at full speed on a heavy comp changes how you animate, because you can keep iterating instead of committing early and living with it.

One thing I kept wanting: layer colours in the hierarchy panel and the timeline. On a comp this size, tagging groups by colour would have saved a lot of hunting.

Grain and glow, in real time

Both run live on GPU canvas instead of being baked in. The grain generates a new field every frame, so it actually moves. The glow reads whatever is on screen underneath it and reacts, frame by frame.

The operator panel

The package now has its own control room: preview and program surfaces, a button for every take, and dedicated controls for the score and clocks, player roster, team identities, comparison stats and on-screen layout.

An operator can update player names, numbers, photos and stats; rename, recolour and swap home and away teams; change comparison values; and nudge the score bug live. The panel drives the score bug, lower thirds, comparison panel, leaderboard, replays and win sequences from one place. Open the live control panel ↗

What I took from it

The reskin surprised me. I expected changing teams to be fiddly and it takes minutes. Colours, logos, names, player photos, the eyes. Everything follows.

Which puts it somewhere closer to a product than a project, and I hadn't set out to build one of those.

Built with Rive Scripting, GPU Canvas, Data Binding, Component Lists, Layouts, Joysticks, State Machines and Components. Arena shots composited in After Effects.