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
ā¢ Aug 8
šŖ Camel Race ā Live Broadcast UI
I didnāt actually plan to enter the Rive Broadcast & Livestream UI Challenge because I didnāt think I had enough time. But when this idea for a live camel race interface sparked in my head two days ago, I just couldnāt stay away.
This is the result of a 48-hour sprint: a broadcast UI featuring real-time tracking, live rankings, race timing, speed analysis charts, and interactive camera selection.
Itās still an early working version and hasnāt reached the level of polish I envisioned yet, but the core logic and data-driven interactions are all there. Iām sharing the Rive file as well so the structure can be explored.
Built with @rive_app
#rivebroadcastchallenge #Rive #MotionDesign #BroadcastUI #InteractiveDesign
upgoating this because when you view the project the rendering in the website (and the vignette prolly) makes it look like a static screenshot of a UI or a gif with a countdown.
But no it's fully interactive clickable broadcast UI.
Rive really needs to make the sidebar scrollable there though
ā¢ Aug 9
Thanks for the upvote! Glad you noticed itās fully interactive. And I totally agree about the sidebarāit would definitely make the UX much smoother!
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic š
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
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.
Super excited to share my entry for the Contra x Rive - Broadcast & Livestream UI Challenge!
I sometimes look at events like GDQ (Games Done Quick) and I took a stab at recreating a similar broadcast overlay.
I was really curious to get a preview of what a full pipeline would look like from Rive to OBS, and I accidentally ended up creating a mini-software that allows me to control all the different properties live. Just like in a real production? I'm not sure, all I know is that it works. š
The project includes 9 components:
šÆ Incentives
ā±ļø Timer
š Runner names
šļø Co-casters
š¹ļø Game info
š° Total donations
āļø Skip names
š Donation alerts
š¬ Intro/Breaks title cards
I have to give a shout out to @blackbox_grafx š I had to speedrun through the design part to get this done on time and I used his designs as inspiration for the cyberpunk vibe.
Special thanks to Claude for the HTML and JS, the extra tips, and honestly having my back.
Cheers!
great work!!
Hello! For my broadcast challenge submission, I created a series of stream overlays building off my last challenge submission. This time, chat is able to use commands to customize the VTuber character in real time.
what are the past projects about?: