We set out to build a broadcast package for a women’s backcountry snowboarding event, the Simple ...We set out to build a broadcast package for a women’s backcountry snowboarding event, the Simple ...
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
Back to feedPost
james's avatar
james kowalski
• Aug 7
We set out to build a broadcast package for a women’s backcountry snowboarding event, the Simple Creature Backcountry Invitational.
Rive allowed us to utilize data binding and flexible layouts so that updates to one set of view model properties carry through the entire package. Animated elements automatically resize to accommodate variable text lengths. State machine logic ensures that no two elements ever occupy the same screen space.
Within Rive, everything works great, but we wanted to take it a step further and see the ui functioning within a live broadcast.
To build out our broadcast environment, we overlaid the Rive graphics layer on a simulated broadcast — looping clips standing in for live camera feeds.
Two other views provide showrunner controls: /control and /admin are behind Google OAuth, gated by an operator allowlist.
Multiplayer, through Supabase
The live state of the broadcast is a single row in the database. The control panel writes it; the output page subscribes to it over Supabase Realtime and pipes every change straight into the Rive view model.
Multiple people can run the show from different devices and see each other's changes. Reload the broadcast mid-event and the graphics come back exactly as they were, because the database is the source of truth.
Driving the file
Everything runs through a single view model instance. Rider names, scores, run numbers, which graphics are up, the control view updates the view model, and Rive takes it from there. That keeps the React side tiny: one component that exists only to push values in.
Performance
Performance is key for a live broadcast. It holds a steady 60 fps on a full 1920×1080 broadcast frame compositing over six video feeds playing at once for seamless cuts.
The result feels less like a web page and more like a live graphics station.
rivebroadcastchallenge
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