UX Motion System | Rive State Machine & UI Animation

A complete UX motion design system built in Rive for a travel booking app. This project covers UI animation, micro-interactions, and state machine logic delivering production-ready assets via dev handoff that eliminated weeks of back-and-forth between design and engineering. When I joined the Wayfarer project, I immediately realized that our timeline was incredibly tight. The traditional workflow of animating in After Effects and simply sending videos or GIFs to the developers wasn’t going to cut it. It was becoming a major bottleneck for the dev team, and I knew we needed a solution that offered more than just decoration. My goal was to use motion as a real communication tool to reduce cognitive load and guide the user’s eye through the booking flow with smooth, purposeful transitions.

I made a strategic decision and reached out to the Project Director and the developers: I decided to migrate the project to Rive. I had to master the tool and its State Machine logic in just a few hours to keep the momentum going. It was a significant challenge to step out of my After Effects comfort zone, but it completely changed the game. By switching to Rive, I could prioritize instant visual feedback for every user action, especially during critical moments like payment, while adding a layer of emotional connection through subtle animations. Instead of just sending animations, I started delivering the entire interaction logic to the team. In the end, we saved weeks of back-and-forth and delivered a much smoother, more human user experience.

Beyond simple loops. I built a logic-driven system where the State Machine 

manages transitions between hover, active, and triggered states, ensuring 

real-time response to user input.

Focused on reducing cognitive load, each icon features smooth, purposeful 

transitions. These components are vector-based and production-ready, 

maintaining 60fps performance.