We’ve been building interactive animations with Rive at Lupian Studio, and the results have been transformative for how we approach web design.

Why Rive?

Traditional web animations — CSS keyframes, Lottie, even GSAP — are powerful but limited when it comes to interactivity. Rive changes the game with:

  • State machines that respond to user input in real-time
  • Mesh deformations for organic, fluid motion
  • Tiny file sizes — a complex animation can be under 50KB
  • Cross-platform — the same .riv file works on web, iOS, Android, Flutter, and game engines

A Live Demo

Here’s a Rive animation running right in this blog post. Try interacting with it:

This animation is loaded from a .riv file and rendered using the @rive-app/canvas runtime — the same technology we use in our Framer components.

How It Works

Every Rive animation has three layers:

  1. Design — Vector shapes, images, and bones created in the Rive editor
  2. Animation — Timeline-based keyframe animations
  3. State Machine — Logic that connects animations to inputs (hover, click, scroll, data)

The state machine is what makes Rive special. Instead of triggering animations with JavaScript, you define the logic visually in the Rive editor, and the runtime handles everything.

What’s Next

In upcoming posts, we’ll dive into:

  • Building custom Framer components with Rive
  • Data binding — connecting live data to animation properties
  • Performance optimization for multiple Rive instances
  • The Rive scripting API (Luau)

Stay tuned, and check out our demo site for live examples.