verve vs Rive

A runtime for interactive vector art, versus code that animates your own component.

What Rive is

Rive is an editor and a runtime. You draw vector art, animate it on a timeline, and wire the animations into a state machine: states, and the transitions between them, triggered by pointer events or by inputs your app sets from code. It all exports as one .riv file, and the Rive runtime plays that file on the web and on iOS, Android, Flutter and React Native.

Use Rive, not verve, if

A designer should own the interactive behaviour, including the logic between states, and be able to change it without anyone touching code. That's what Rive's state machines are for.
The thing moving is illustration: a character that reacts, an icon with several states, game UI.
You need the same interactive asset on the web and in native apps, from one file.
The animation needs bones, meshes or constraints. verve has none of those.

Use verve if

The thing moving is a component you already built, like a button, a card or a menu, and it should stay real markup with your own styles and theme.
You'd rather have the hover and press states as a few lines in your own code than as logic inside a binary file.
You want nothing added to your bundle for it. A CSS export has no runtime at all.
Text, focus and screen readers should work the way they already do on your page, because it's still your DOM.

Side by side

What	Rive	verve
What you leave with	A .riv file	Motion, GSAP or CSS source, in your own files
What ships in your bundle	The Rive runtime, which plays the file	Motion or GSAP if you export those; nothing at all for CSS
What gets drawn	Vector art the runtime paints into a canvas	Your own DOM, with its markup and styles
Interactive states	State machines built in Rive's editor, reacting to pointer events and inputs from your code	Hover, press, focus and drag states, exported as code
Text	Drawn into the canvas	Your real elements, so text stays text
Where it runs	Web, iOS, Android, Flutter and React Native, from one file	The web

What you end up writing

Rive, in a React app — the hover and press logic live inside the .riv

import { useRive } from "@rive-app/react-canvas";

export function Button() {
  const { RiveComponent } = useRive({
    src: "/button.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
  });
  return <RiveComponent style={{ width: 160, height: 48 }} />;
}

verve's Motion export for a button's hover and press states

import { motion } from "motion/react";

export function Button() {
  return (
    <motion.div
      whileHover={{ y: -2, scale: 1.04 }}
      whileTap={{ scale: 0.97 }}
      transition={{ type: "spring", stiffness: 260, damping: 24, mass: 1 }}
    >
      {/* your component here */}
    </motion.div>
  );
}

Check it yourself

Every claim above about Rive is answerable from their own documentation. If one of them goes out of date, it is a bug on this page and we would like to know.

Open the editor All comparisons