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
We set out to build a broadcast package for a women’s backcountry snowboarding event, the Simple Creature Backcountry Invitational.
Rive allowed us to utilize data binding and flexible layouts so that updates to one set of view model properties carry through the entire package. Animated elements automatically resize to accommodate variable text lengths. State machine logic ensures that no two elements ever occupy the same screen space.
Within Rive, everything works great, but we wanted to take it a step further and see the ui functioning within a live broadcast.
To build out our broadcast environment, we overlaid the Rive graphics layer on a simulated broadcast — looping clips standing in for live camera feeds.
Two other views provide showrunner controls: /control and /admin are behind Google OAuth, gated by an operator allowlist.
Multiplayer, through Supabase
The live state of the broadcast is a single row in the database. The control panel writes it; the output page subscribes to it over Supabase Realtime and pipes every change straight into the Rive view model.
Multiple people can run the show from different devices and see each other's changes. Reload the broadcast mid-event and the graphics come back exactly as they were, because the database is the source of truth.
Driving the file
Everything runs through a single view model instance. Rider names, scores, run numbers, which graphics are up, the control view updates the view model, and Rive takes it from there. That keeps the React side tiny: one component that exists only to push values in.
Performance
Performance is key for a live broadcast. It holds a steady 60 fps on a full 1920×1080 broadcast frame compositing over six video feeds playing at once for seamless cuts.
The result feels less like a web page and more like a live graphics station.
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
ORBIT: Interactive Hero Concept (Motion-First Landing Page)
ORBIT is an interactive landing page hero concept built to show how motion can make a website feel alive without slowing it down.
What’s inside:
Cursor-reactive hero: floating cards, labels and glow move at different depths as the cursor moves.
CTA button states: hover lift, press squeeze with ripple, and a success morph with particles and a toast.
Dashboard cards: staggered entrance with count-up numbers, animated bars, a progress ring and a drawing line chart.
Interactive feature icons: each icon has its own idle, hover and active animation.
Smooth transitions: eased modal, toast and scroll, with reduced-motion support.
Mobile-friendly: responsive grid, touch taps, no sideways scroll from 360px to 1920px.
I tested all of the above with an automated suite (20 checks, all passing) and made a 45-second demo video with sound design.
Built with: HTML, CSS and JavaScript as a working prototype.
Need this in Rive? The same motion and interaction logic (hover, press, success states, cursor-driven movement, icon states) can be rebuilt as a production-ready Rive animation with a state machine and integrated into your website. Message me with your requirements and I’ll share a timeline and quote.
how i ensured seamless user experience with fast api response in really heavy requests and where we should get instant api response: On the gaming boost platform that i have built, the real challenge was implementing complex matrix pricing that works in real time without using websockets ofc
i ensured really fast reponses (RT<3ms) by doing this three steps:
1- First of all understanding client needs and the importance of instant response for optimal user experience.
2- Defining the problem in small steps: in technical side i implemented this on 3 layers
First one is the service layer : the easiest and the light one on size, it fetches the simple content like title, description, FAQs .....
Second Layer : Defining the difference between a service that needs going from point A to point B and this can be done by : linear steps, dropdowns, or slider which accepts 2 values. This is simply can be done via a boolean variable. So a service will only fetch what is on layer 1 + simple boolean variable
Third Layer: This layer will exist only if the boolean is on true, so to go from A to B we should ensure that Last point is > than first point, and we need price from A to B, A to C , B to C and so on...., so the solution was a upper triangular matrix with two parameters (price and required time). So fetching a service that needs this type of pricing will go through those 3 layer, last layer will be fetched depending on the values of 2 body parameters - each api call is dedicated only to get that price and time so very small payload, so each client change will be reflected instantly, but if all the things were implemented in same layer, so loading time will be insane espacially in high traffic.
🎃 TRICK OR TREAT? My entry for the #rivehalloweenchallenge
Treat the kids, trick the monsters, and do it before the timer runs out.
Built with the Rive CLI + Claude Code, with GPU Canvas WGSL shaders for fog, flames and a game-over screen shake, plus Luau scripting, data binding and state machines.
