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
Hi! 👋 Here is my submission for the Broadcast & Livestream UI Challenge by Contra and Rive
This is my first project built in Rive. I created an interactive esports broadcast overlay featuring a live scoreboard, match timer, player stats, and a kill feed, all powered by Data Binding through a single View Model to simulate a real live broadcast.
The first few days were smooth, but once I got into timelines and Data Binding, things became a lot more challenging. It was definitely frustrating at times, but also a lot of fun to figure out. Huge thanks to @contra and @rive_app for pushing me to learn something new!
#Rive #Contra #BroadcastUI #Esports #GameUI #MotionDesign #UIDesign #DataBinding #BuildinPublic #rivebroadcastchallenge
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
explain what you build and why
Here is a breakdown of what was created for your Rive Broadcast & Livestream UI Challenge entry and the visual design strategy behind it:
What Was Built
The generated video is a 30-second hyper-realistic broadcast graphics showcase designed around a Futuristic Live Race Command Center. It brings together key live-data visualization elements commonly used in top-tier sports broadcasting and esports production:
Futuristic Broadcast Environment:
Set in a dark, atmospheric control center control room (#05070F dark base).
Features glowing holographic displays, volumetric neon blue (#5B5BFF) and cyan (#00E5FF) lighting, and subtle particle ambient depth.
Dynamic UI & Glassmorphism Dashboards:
Multi-layered UI panels featuring translucent glassmorphic card designs with soft neon edge glows, dynamic spring animations, and active ambient motion.
F1-Style Live Timing Tower & Telemetry:
Real-time driver leaderboard updates, live position changes, animated timing counters, and fast lap highlights.
Expanded driver telemetry widgets showing dynamic speedometers, RPM meters, gear indicators, and real-time telemetry graphs.
3D Interactive Circuit Map & Broadcast Overlays:
Glowing 3D track visualization with moving car position markers and sector indicators.
Broadcast-ready TV overlays including dynamic lower thirds, race alerts, and statistical widgets.
Why It Was Built This Way
To win or stand out in a high-profile UI design competition like the Rive Broadcast & Livestream UI Challenge, the showcase needed to strike a balance across several key pillars:
Broadcast Authenticity (F1 / ESPN / Riot Games Aesthetic):
Modern live sports coverage relies heavily on high-density information architecture that remains clean and readable. Combining dynamic race telemetry with sleek, broadcast-ready lower-thirds mimics multi-million dollar television production packages.
Motion & Technical Precision (Apple Keynote Polish):
Every UI widget has continuous micro-animations (counters ticking, graphs oscillating, glowing neon pulses). Demonstrating active state changes proves the motion design is fluid, responsive, and high-frequency (60 FPS feel).
Visual Depth & Futuristic Aesthetic:
Using glassmorphism layered over a dark background creates high contrast for neon data indicators (#00E5FF Cyan, #00FF9D Green, #FF3D71 Red). This gives the UI a sleek, sci-fi HUD feel while maintaining clean visual hierarchy.
High-Impact Showcase Format:
By sweeping through macro views of the command center down to granular telemetry cards, the video effectively acts as a dynamic showreel of your UI vision, immediately communicating high quality and technical capability to challenge judges.
Really cool 🔥
A live esports score bug — the kind of compact overlay you see at the bottom or top of a broadcast during a match (like on ESPN or a Twitch stream). It shows:
Two teams (LGX vs NVX) with their colors, names, and scores
A live match timer in the center
A momentum bar showing which team currently has the upper hand
An alert banner that slides in to announce big moments like a lead change
Technical Choices:
Data Binding — used to connect things like the match timer and alert text to a central "View Model," so in a real broadcast pipeline, those values could be updated live from an actual data feed (game score APIs, timer sync, etc.) without touching the design.
State Machine — used to control when the UI reacts. Rather than the score bug being static, it has defined states (idle vs. "something just happened") so it can respond to discrete events, the same way real broadcast graphics trigger animations when a goal is scored or a round ends.
Why I choose this project?
Creative concept — a clearly branded, broadcast-style scoreboard rather than a generic template
Polish — consistent colors, clean typography, and symmetrical layout :🔥 make it look genuinely broadcast-ready
A futuristic livestream UI built for deep-sea exploration. It features a glowing bioluminescent companion avatar, live sensor panels, and dynamic alert VFX to create an immersive streaming experience beyond gaming