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
A Real-Time Formula 1 Broadcast & Telemetry Dashboard modeled after official TV race broadcasts. It is built using React, TypeScript, Framer Motion, and Rive Canvas Graphics.
Live Standings Tower (LeaderboardTower): Displays driver positions (P1–P5), team colors, gap times, and tire compounds (SOFT, MEDIUM, HARD). Selecting a driver immediately focuses the rest of the dashboard on them.
Interactive Circuit Monitor (TrackMap): An animated SVG map of the Monaco Grand Prix circuit. All 5 driver positions orbit the track simultaneously with dynamic speed offsets based on live telemetry and race events.
Real-Time Telemetry & Rive Engine (TelemetryPanel): Displays active Speed (KM/H), Engine RPM, DRS activation, shift light warnings, official driver portraits, and 3D car models. It pipes speed and RPM metrics straight into an active Rive Canvas engine state machine to handle visual performance feedback.
Race Control Controls & Ticker: Interactive control triggers (OVERTAKE, PIT STOP, FASTEST LAP) that instantly modify telemetry values, car pacing, and broadcast banner notifications in real time.
Why It Was Built
Interactive F1 Broadcast Experience: Traditional telemetry dashboards present raw data in static tables. This dashboard recreates the high-energy visual experience of official F1 TV broadcasts with instant driver switching.
Dynamic Vector Animation with Rive: Standard UI components struggle with smooth 60 FPS graphics during rapid data changes. Integrating Rive provides smooth WebAssembly-powered canvas rendering driven by live state inputs (Speed & RPM).
Multi-Driver Track Visualization: Most race monitors display only one car at a time. This implementation dynamically renders all 5 grid drivers along a shared vector path, maintaining accurate gaps, team branding, and interactive highlights.
Data-Driven Telemetry Simulation: Demonstrates how data flows through modern Web Apps—from state modifications in App.tsx down to smooth telemetry updates in the individual telemetry widgets.
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!
Aether Nexus 2026 is a futuristic interactive broadcast and telemetry UI created for the Rive Broadcast & Livestream UI Challenge. The project simulates a live racing broadcast with a real-time Director's Control Console, animated state machines, and data-driven telemetry.
The experience features interactive broadcast modes including Standby, Intro, Live Telemetry, Driver Spotlight, Battle Mode, Pit Strategy, Instant Replay, and Victory Podium. Users can manipulate live variables such as speed, RPM, G-force, heart rate, shield level, and plasma heat while switching camera feeds and driver profiles in real time.
The interface is designed to demonstrate Rive's advanced capabilities, including State Machines, Data Binding, Variables, Events, Nested Artboards, GPU Canvas rendering, and smooth 60 FPS interactive animations, all presented in a cinematic broadcast package inspired by Formula 1 and next-generation esports production.
Please make sure your submission includes a Rive link!
🎱 8-Ball Pool Real-Time Stat Tracker & Broadcast Overlay
Project Overview
As an avid 8-ball pool player and viewer, I am always curious about the statistics during and after a match. To solve this, I designed a dynamic system where a referee or graphics operator can manually select match outcomes and log real-time statistics. These stats are sent to a database and instantly displayed on a live broadcast overlay or a physical screen positioned right next to the pool table.
Key Features & Use Cases:
Operator Panel: A streamlined interface for referees to quickly log pot success rates, safety play data, and consecutive ball pots.
Live Stream Overlay: A clean, professional graphic that updates dynamically for viewers watching online.
On-Venue Display: A digital scoreboard layout designed to give players and spectators in the venue immediate feedback.
How I Built It in Rive:
State Machines: Drives the interactive UI transitions and toggles between operator inputs and visual feedback states.
Data Binding: Bridges the gap between external game events and the graphical elements, feeding real-time numbers seamlessly into the scoreboard.
Rive Scripting: Dynamically handles the data logic inside the runtime, updating player stats on the fly based on operator choices.