Rive

~146kb minified

Interactive vector animations with state machines.

01

See It in Action

Every demo loads a self-hosted v7 .riv file into a canvas. The third demo shows runtime introspection -- listing every artboard, animation, and state machine the designer baked into the file.

Load a .riv file into a canvas and autoplay it. The simplest Rive pattern -- identical in shape to a Lottie load.

Preview
02

What is Rive?

Rive is a runtime for designer-authored interactive vector animations. A designer builds the animation -- and its state machine, inputs, and transitions -- in the Rive editor, exports it as a single .riv binary, and you load it at runtime into a <canvas>. The big difference from Lottie: Rive files respond to runtime inputs.

Instead of just playing back frames, you flip a boolean input (Hovered), pass a pointer position (Axis_X, Axis_Y), or fire a trigger (Clicked), and the Rive runtime blends between the states the designer authored. That turns vector animations from decorations into actual UI components.

🎮
State Machines
Designers author named states and transitions in the Rive editor. At runtime you flip inputs (boolean, number, trigger) and the animation blends between states automatically.
🖱️
Runtime Inputs
Drive an animation from any JS value: pointer position, API response, form validity, scroll progress. Lottie can only play back; Rive responds.
📦
Tiny File Format
Rive files are often smaller than equivalent Lottie JSONs -- and stay crisp at any size. One binary file per scene, no per-frame data.
03

When to Use Rive

Use when
✓ Interactive buttons with state transitions (idle / hover / press / success)
✓ Avatars or characters that react to the cursor or data
✓ Form validation icons that respond to valid / invalid input
✓ Animated product illustrations driven by user scroll or input
✓ Gamified onboarding flows where the animation reacts to progress
Avoid when
✕ Static or purely decorative animations where Lottie's ecosystem is larger and simpler
✕ 3D scenes with meshes, lights, or cameras (use Three.js or Babylon.js)
✕ Teams without a Rive editor license or designer capacity -- authoring .riv files is where the work lives
04

How Rive Compares

Rive vs Lottie

Lottie plays a fixed JSON file -- no interactivity. Rive files respond to runtime inputs and state changes. Use Lottie when the designer's animation is the whole thing; use Rive when the animation needs to react to the user or your app state.

Rive wins at
State machines, runtime inputs (hover, click, data), smaller file sizes for the same complexity, built-in editor (rive.app), hit-test detection on animations
Lottie wins at
Much larger ecosystem (LottieFiles marketplace), simpler mental model, tiny runtime (~18kb light), massive library of ready-made animations, wider designer familiarity
Rive vs GSAP

GSAP animates DOM, SVG, and canvas from code -- any property, any timing. Rive plays designer-authored state machines. They're complementary: GSAP animates the page chrome, Rive plays the complex illustration inside it.

Rive wins at
Designer hands off a file with state machines baked in, interactivity baked in, no animation code to write, consistent rendering across platforms
GSAP wins at
Code-first control over every value, no editor required, scroll-linked animations, timeline sequencing, largest animation ecosystem on the web
Rive vs Framer Motion / Motion

Framer Motion is a code-authored React animation library. Rive is a designer-authored vector animation runtime. If your team's animations live in code with React components, use Framer Motion. If a designer authors complex scenes in a visual tool, use Rive.

Rive wins at
Complex designer-authored illustrations, state-machine logic in the file itself, no React dependency, runs anywhere canvas runs
Framer Motion / Motion wins at
Code-native API, React-first ergonomics, gesture handling, layout animations, no editor required, works with any component
05

Get Started with Rive

Terminal 
npm install @rive-app/canvas
Terminal 
yarn add @rive-app/canvas
HTML 
<script src="https://cdn.jsdelivr.net/npm/@rive-app/[email protected]/rive.min.js"></script>
Quick Start 
<canvas id="rive-canvas" width="400" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/@rive-app/[email protected]/rive.min.js"></script>
<script>
  const r = new rive.Rive({
    src: "https://example.com/your-animation.riv",
    canvas: document.getElementById("rive-canvas"),
    autoplay: true,

    // If the file has a state machine, name it here to enable runtime inputs
    stateMachines: "State Machine 1",

    onLoad: function () {
      // Match the canvas drawing surface to its CSS size so it renders crisp
      r.resizeDrawingSurfaceToCanvas();

      // Flip a boolean input to drive a state transition
      const inputs = r.stateMachineInputs("State Machine 1");
      const hovered = inputs && inputs.find(function (i) { return i.name === "Hovered"; });
      if (hovered) hovered.value = true;
    }
  });
</script>
06

Related Libraries

Lottie
Render After Effects animations on the web via a single JSON file.