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
I went back in tv history to one of the most Iconic broadcast experiences
The RCA Indian Head Test Pattern to bring it to the future with Interactive Design using rive ,for the #rivebroadcastchallenge
The Indian Head rigged and animated using rives mesh feature for micro animation of waving feathers
The test markers vectorized and animated with trims dashes and reveals using clips.
Converted a base vector trace to organized vectors then animated for use as an intro reel, tv hold, stream starting soon or end card, stinger, everyone's favorite gag: technical difficulties , among so many other use cases.
It was easier and faster in rive to animate this version than what it took to organize the vectors (sharpen an axe and all that IYKYK.)
Re-creation, cleanup and organization was the heavy part to create a foundation for all future iterations using almost 100 groups organizing 400 paths ( mainly to have versions that are fills and versions that are custom strokes)
Filled shapes had to be cleaned up into only strokes
With a difficulty being getting the centerline of a shape in vector software like Inkscape isn't a thing apparently, so it's manual work before the fun begins.
After that it becomes simple to take advantage of rives effect groups letting you apply specific trim effects to groups of different shapes.
Then stack most in state machine layers with a BlendState instead of one single massive timeline to manage all the greebles in a FUI like design.
sporadic timelapse of revectorization and organizing process:
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
Live Cricket Broadcast Package
I’m not a professional motion designer, but I wanted to challenge myself and build something beyond a simple animation.
Using what I know about Rive, frontend development and cricket, I created a complete live broadcast graphics package with a scorebar, player statistics, ball-by-ball updates, FOUR, SIX and WICKET celebrations, and match stat screens.
All the information is data-bound and updates dynamically from a working Next.js scoring application. I put my best effort into combining design, animation, logic and real-time data to create an experience that feels like a real cricket broadcast.
This project represents my learning, experimentation and the best of what I currently know in Rive.
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.
Interactive football broadcast UI built in Rive using data binding and state-driven animation.
The system responds in real time to match data, including the clock, team selection, scores, goal events, player callouts, statistics and sponsor overlays. A separate control panel demonstrates how the broadcast package can be operated live during a match.
Social post:
https://x.com/X1_0_/status/2084746905293107387?s=20
Live interactive demo:
https://laliga-rive.vercel.app/
Rive project:
https://editor.rive.app/file/laliga/1642850
Original broadcast reference:
https://youtu.be/Cdtes6MRo8o?t=240
Amazing. Did you also bult that control panel?