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
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
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
I built a live shopping UI concept built entirely in Rive, featuring original illustrated assets and a data-bound countdown timer that drives urgency into the flash sale experience.
Every interaction is powered by Rive's state machine and timer data binding to feel truly connected to a real shopping stream.
First time learning animation in Rive, honestly I spent too much time on debugging and figuring out how to make things work 😂 But I had fun doing the animation.
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!
My contribution to the challenge: a minimal live stream overlay for a FIS Big Air snowboarding event.
Three parts.
A leaderboard that doubles as an info display — call up any athlete and it becomes their card: personal details, results, run history.
A lower third with multiple states, including a scoreboard that fills as the judges come in.
And a technical overlay carrying the numbers behind each jump — take-off speed, airtime, height, distance.
Using Data Binding and Scripting, I wanted to find out how much of the actual event logic could live inside a single Rive file.
The file takes in judge scores and a handful of triggers — rider at the gate, dropping in, scores arrived, run over.
Custom scripts do the rest. Totals calculated to FIS judging rules, ranks updated, lead changes detected, every graphic on screen updated automatically. Nobody needs to prep the winner's graphic in advance. Just hit the button to fire it.
Ten years ago I worked on the live TV packages for the Red Bull Cliff Diving and Air + Style Snowboarding :World Tours.
Everything I built in After Effects had to be rebuilt from scratch by developers before it could go on air.
Rive would have made that a whole lot easier :)