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
BLACK//VOLT — An Interactive Motorsport Broadcast Dashboard
I created BLACK//VOLT to explore what a futuristic live racing broadcast could feel like using Rive. Instead of focusing only on animation, I wanted to build an interface that behaves like a real broadcast dashboard with interactive telemetry, live race data, and driver information.
The project features:
• A cinematic startup sequence
• Live telemetry powered by Rive scripting and data binding
• Interactive driver hover cards
• Dynamic race positions and vehicle statistics
• Component-based architecture with state machines
• Animated broadcast UI elements including a pulsing live indicator and border effects
This was my first complete project in Rive, and it challenged me to learn animation, state machines, scripting, data binding, and interactive UI design while building something that feels like a real live broadcast rather than just a motion piece.
Thank you for taking the time to view BLACK//VOLT!
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
Finally, My submission for Rive BroadCast Challenge.
A fully interactive VTuber livestream experience built in @Rive , featuring a custom anime character rigged and animated from scratch with visemes and facial expressions. The project includes a modern streaming UI, scripted stream timer with start/stop/reset and custom time controls, interactive chat with editable usernames and messages, and dynamic subscription and donation alerts.
It also explores Rive’s 3D Canvas with a rotatable, swappable logo placeholder, along with interchangeable game panels. Everything is powered by Rive Scripting and Data Binding, making the components dynamic and ready to integrate into web or mobile applications.
Invite Link: https://editor.rive.app/file/broadcast-live-stream-final-1/2492265?linkId=CFO5HpEGeEu5nnAi5C8UPA
3D Canvas? With all those controls? REALLY man? Amazing work, I have been trying to setup the 3D canvas but I am not able to make it this useful. Would love to use your scripts.
🐪 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
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.