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
This project demonstrates how finished 2D artwork can be converted into interactive website motion using Rive.
The animation responds to pointer movement, scroll position and click states through a native Rive state machine.
I also built the browser integration in TypeScript with a small normalized input contract, so the animation can be easily integrated into an existing website.
The project includes responsive behavior, reduced-motion support, fallback artwork, editable Rive source, compiled .rivasset and developer-ready documentation.
Interactions: pointer / hover, scroll, click trigger, focus state and reduced motion.
Tech: Rive, RML, TypeScript, Vite, HTML and CSS.
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
IPO Coins landing page web design 3D animation website icons
Great Design, R
What if you could explore a basketball arena in 3D before booking your seat?
You found the game. But before you pay, how do you know which seat is worth it? A flat seating chart gives you a section and a number, but it can be hard to picture your position relative to the court.
So I built BOUNCE with Lovable, a basketball ticketing concept centered around interactive 3D seat selection.
Rotate the stadium, zoom into the stands, explore different sections, and compare prices before choosing your seats directly inside the 3D arena. The goal is simple: help fans feel more confident about where they’re sitting before they book.
From there, complete checkout and get a ticket you can view, save, or print. My Tickets brings bookings together, with a one-time seat change for the same game and refund requests for eligible bookings.
Bold orange, oversized typography, and scroll driven motion bring the energy of basketball into the experience.
Try the demo: https://bouncebasketball.lovable.app/
Fictional teams. Simulated payments. No real charges.
Less guesswork. More game. BOUNCE. Your game. Your view.
The 3D elements, especially seat pov idea is very interesting🔥
firendev: brand identity and website.
firendev is a video studio, and the name carries the whole brand. Fire, for the spark that starts every piece. Firenze, for a craft measured with proportion and geometry. Develop, in its two senses: developing film and developing software. One line holds it together: developed like software, finished like film.
Everything else grows from that. The spark is the dot of the i. The floor is the herringbone brick of Florence's Duomo. The mark is a camera frame waiting for its spark.
I'd love your honest take on the mark and the hero.
Full case study: https://contra.com/p/bWEMrvZW-firendev-brand-identity-and-website
It's a great design 🔥
I liked the animation in Hero; I'm curious which library you used.