This is a set of samples of my Rive animations, which are lightweight, high-performance, interactive motion graphics, for web, apps, and games. With Rive I can build complex and engaging user interfaces, product demos, educational elements, and animated characters, merging design and code for rich user experiences, beyond Lottie or gif.
More Control: You have fine-grained control over animation logic (states, transitions, inputs) directly in the editor, unlike Lottie where customization is limited after export.
Smaller File Sizes: Rive files (RIV) are often significantly smaller than comparable Lottie JSON files.
True Interactivity: State machines provide a robust way to handle complex user interactions that are difficult or impossible with standard Lottie or video/GIF formats.
Interactive Web Design for SaaS
Looping and Hover Animations
These animated app screens demonstrate how Rive can bring product workflows to life. The screens automatically cycle in sequence to showcase key features, while hover interactions allow users to take control and explore each screen individually. Click interactions can also be incorporated to create even more engaging product demos based on your needs.
Character Creator
Full User Interactive Choices
This interactive avatar creator showcases the power of Rive for building dynamic, customizable experiences. Users can personalize body type, wings, eyes, mouth, and background color in real time through intuitive interactions powered by Rive state machines. Each selection can also be connected to external app or website data—making this approach ideal for games, onboarding flows, product customization, and personalized digital experiences. Create your own character below.
Interactive Betno Box Demo
Data Binding | Inputs | Listeners
Click around and explore. This interactive “bento box” layout brings together a wide range of Rive capabilities in one experience—from playful character animation and hover effects to light/dark theme toggles, dynamic menus, responsive infographics, and more. Every section offers a different example of what’s possible.
Loading Screen for Cooking App
Microanimations | Transitions
The following animation demonstrates the type of fluid and engaging animations possible with Rive. UI Feedback, Interactive Onboarding Flows, State-Driven UI Elements, Gamification Elements, Data Visualization, Error Messaging, Custom Loaders & Progress Indicators, Interactive Illustrations, Interactive Navigation, and more are all possible with Rive animations.
Other Rive Examples
Rive animations are:
Interactive complex, multi-state animations easily controled with code, offering much more interactivity than simple timelines.
Seamless Developer Handoff: Animations can be easily exported for web (JavaScript/TypeScript) and mobile (iOS/Android/Flutter/React Native).
Vector-Based & Scalable: Animations are resolution-independent, meaning they look crisp and clean on any screen size.
Performance Optimization: Rive animations often have smaller file sizes and run efficiently.
Code-Free Animation Creation: Designers can create sophisticated, interactive animations without writing code, speeding up workflows.