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 everyone! π
I built a Men's Single Sculls Live Score Concept for the @Rive Γ @Contra Broadcast & Livestream Challenge.
The idea was inspired by the atmosphere of the FIFA World Cup and the energy of Norwegian rowing fans cheering their athletes down the course. I wanted to bring that same excitement into a live broadcast experience for rowing.
Built with Rive Scripting, Data Binding, and nested View Models, the interface reacts instantly to live race data without manual animation.
Would love to hear what you think! π£π
Lovely! ππΌ
Thanks! π
Really Nice!
Thank you, Roni!
Thanks! Appreciate it!
Thanks π
Super awesome
Thank you, Adesina!π
Awesome workππ
great!
nice!!!
Nice work sirojiddinππ
Thank you, Muhammad! Appreciate it!
Reacting to live race data through nested view models instead of hand keyed animation is the right call for a broadcast use case, way less brittle when the data changes pace mid race. How are you feeding it live data for testing, mocked JSON or an actual feed?
This is great!
Gap yoq!
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
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic π
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Built a playful kindergarten experience with motion at its heart.
For this project, I wanted to create more than just a website I wanted to build a digital space that feels alive, friendly, and magical for kids and parents.
I explored:
β’ Rive animations for interactive characters and micro-interactions
β’ Smooth motion design to create a storytelling experience
β’ A minimal, colorful UI that feels playful without being overwhelming
β’ Responsive design with performance in mind
The goal was to make every interaction feel joyful from the first scroll to every small animation detail.
A small reminder that good design is not only about how something looks, but also about how it feels. π
#WebDesign #FrontendDevelopment #Rive #MotionDesign #UIDesign #CreativeDevelopment #React #WebAnimation
what an adorable webpage, fun for folks browsing no matter the age!
β’ 2d
CTR focused - YouTube Thumbnail Design
Cadence - A Motion Design System Explorer
The goal
Motion design dies in translation. A curve shaped in After Effects leaves the building as a reference video and a duration guess, and the feel is gone by the time it ships. Cadence closes that gap: a motion design system explorer where design tokens drive real UI components in real time, and a tuned motion system exports as the artifact an engineering pipeline consumes.
My role
Sole designer and developer: product design, motion design, token architecture, the React build, Rive animation, deployment. I planned the system in Claude and built it in Claude Code, and every architectural decision in the codebase is documented in a dated record. The rigor is part of the deliverable; a motion system an engineer can trust is one whose reasoning is written down.
Deliverables
The live tool at cadence.davidpreli.com: Token Lab, a live token editor; a Principles Library running 18 animation principles on real components; Motion Tiles, a Rive field where three named motion personalities retime the whole grid at once
The token architecture: CSS custom properties read at runtime by Framer Motion, with export to DTCG, CSS, JSON, and Framer Motion formats, and import with a validation report
Twenty custom token-driven components, four themes with WCAG AA contrast throughout, reduced motion as a first-class state
Production deployment on a Cloudflare Worker, verified by an end-to-end suite that runs against built output
A written case study and the full decision record
Links
Tool: cadence.davidpreli.com
Case study: cadence.davidpreli.com/cs
I'm open to design systems, motion systems, and creative technology engagements: defining a motion language, building the tools that make it usable, and documenting it so the decisions hold up after I leave.
β’ 2d
what a neat exploration! saving this to read up on when time's more merciful, you surely sparked my curiosity!