TIGERS vs RAVENS A basketball broadcast package built in Rive. It covers both places graphics sho...TIGERS vs RAVENS A basketball broadcast package built in Rive. It covers both places graphics sho...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
TIGERS vs RAVENS
A basketball broadcast package built in Rive. It covers both places graphics show up during a game: the screens inside the arena, and the TV feed going out to everyone else.
The arena side has a game day opener, a three point celebration and win sequences. Each is built twice, once for the main centre hung screen and once for the ribbon boards that wrap the balcony.
The broadcast side has a score bug, lower thirds, a live leaderboard and a stat comparison panel.
I have wanted to try this kind of heavy sports typography for a long time and never had a reason. This was the excuse.
What I was actually chasing was an experience, not a set of elements. Score bugs and lower thirds are the easy part of a package like this. I wanted 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. Not a template you re-render for each version, but video that personalises itself in real time. That part worked better than I expected.
Nothing is typed into an artboard. Player names, numbers and stats live in a PlayerVM. Colours, logos and team names sit in view models next to it.
So there is no Tigers version and no Ravens version of anything. There is one version and two sets of data. Switching teams takes a couple of minutes.
The three pointer shows it best. The main screen and the ribbon read from the same view model, so changing the player updates both at once. You can watch the ribbon change in the video while I never open that file.
The comparison panel takes two raw numbers and works out the bar lengths by comparing them against each other, so the leading team always fills its bar. Scale against a fixed maximum instead and low count stats like steals turn into two identical stubs.
It also flips for stats where lower is better.
Elsewhere, scripts run the game and shot clocks, reorder the leaderboard when points change, stagger the comparison rows in, and handle the glow and grain live on GPU canvas instead of baking them in.
WHAT DID NOT MAKE IT
An operator panel. Preview and program, a button per graphic, thumbnails of what is queued next. Everything already runs off data, so it is not really a technical problem. I just ran out of time. It is the first thing I will build on top of this.
Built with Scripting, GPU Canvas, Data Binding, Component Lists, Layouts, Joysticks, State Machines and Components.
Kavindu's avatar
Full case study, with the videos and a closer look at how it works: https://contra.com/p/XPUEbM3E-tigers-vs-ravens-live-basketball-broadcast-packag
Kavindu's avatar
I also finished the operator panel I mentioned here. It can fire takes, run the score and clocks, edit player data, swap team profiles, set comparison stats and position graphics live.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started