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
Related posts
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
I design Framer websites for B2B brands for a living... then a video player challenge showed up and I lost all self-control 😮💨
Most players on the web look the same: a black box, a thin bar, a play icon you've seen a thousand times. And when a team asks "can the player feel like OUR brand?", the answer is usually "sure, we'll change the colour".
So for the Video.js Skins Design Challenge I built Afterglow 98. A late-90s player window that drives a 3D computer sitting in a dark room. Press play and the camera pushes into the tube while the window tucks away (move the mouse and it comes back). View flips between the screen and the whole room 📺
The look was the fun part. The real work was making it behave like a proper player: Space or K plays, the arrows seek and change volume, F goes full screen, C turns on captions. Chapters, hover thumbnails, a phone layout, and calmer motion for anyone whose device asks for less of it.
To be fair, nobody needs a CRT in their player (I'm aware 🤡). But a skin is the first thing people feel before the first frame... and a grey box never made anyone feel much.
It streams from Mux and it's live on my site's lab page, so you can play it right now 👇
Which one would you ship on your own website, the safe skin or the weird one? 👀
Built to be sent.
Framer design partner for B2B brands and AI startups. DM "site" if yours is next.
#framer #videojs #mux #webdesign
Created this for Halloween Challenge but wasn't able to complete it on time.
So here it is: Check it out
