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
F1 Broadcast is a live racing broadcast concept that visualizes race data through an interactive interface built in Rive.
The experience includes a live track map with animated progress, a responsive speedometer, vehicle status, weather conditions, battery and sensor indicators, and interactive controls that work together as a broadcast UI. The interface reacts to different race states, creating the feeling of watching a live F1 broadcast.
The interface was built using multiple Rive state machines, synchronized animations, and interactive components. Different states work together to update the dashboard, map, speedometer, and vehicle data in real time. The final walkthrough was edited in DaVinci Resolve with racing footage to better showcase the broadcast experience.
#RiveBroadcastChallenge #MotionDesign #InteractionDesign #Formula1 #UIAnimation
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
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Hello! This is my submission for Contra's #rivebroadcastchallenge : an eSports Charity Event type graphics package for live streaming for game like League of Legends and Valorant.
The package includes:
- Player portraits that can be updated according to each players picture.
- Team Icons that can be updated according to each team.
- A scoreboard where the team’s icon and name can be updated live, and the score is updated in real time with subtle animation triggers for each scored point.
- A live player leaderboard that uses a script to update in real time based on kills or points, that can be expanded/collapsed for more detailed information.
- Important game kill pop ups like ‘First Blood’ and consecutive kills from 'Double Kill’, all the way to ‘Penta Kill’, each showcasing the portrait of the player who died and the one that got the kill.
- Post match stat comparison based on two players, showcasing their picture, stats, and who holds the crown for each stat.
- An MVP showcase banner showing the top player's stats for the match and their picture.
- Donation alerts showing the donators username and amount donated with varying icons based on the donated amount.
- A live donations’ progress bar that uses a script to update the donation progress in real time, with animation triggers for every milestone.
One of the new Rive features I was able to implement was databinding a keyframe. I used it to animate the donations’ progress bar in and out animations, it gave me the ability to set an out keyframe into a keyframe that was bound to the data of the percentage that was already received, data that is updated in real time.
I learned a ton in the process and had a great time creating this from the rough sketches to linking up state machine triggers to viewmodels and all the databinding process.
Here's a link to preview it inside of Rive: https://editor.rive.app/file/broadcast-challenge/2449294?linkId=eTXuQh835k2iBjB-T2GcEA.
Hope you enjoy!
I built AURORA-7, a fictional live mission broadcast system for Helios Frontier.
It includes a launch countdown, mission clock, telemetry, event timeline, crew profiles, lower thirds, and event information. Each element was created as a reusable stateful component controlled through exposed properties and Rive ViewModels.
I built it to explore how complex live mission data could feel clear, cinematic, and easy to control—while demonstrating how Rive can power a complete data-driven broadcast system rather than a single animation.
This is really cool. Love how you turned complex data into something that's easy to follow.
I designed a dynamic and futuristic Esports Live Stream Broadcast UI overlay for this challenge. It features a high-energy neon aesthetic with a central matchup layout (Team A vs Team B), complete with a live stream timer and custom graphic frames tailored for competitive gaming broadcasts.