Rive
Vector animation editor whose State Machine files run natively in app runtimes
Rive is a collaborative editor for vector graphics and animation, paired with open-source MIT runtimes that play the resulting .riv file directly in a product. Its State Machine lets you wire animation states and inputs in the editor, so the same file responds to app events, hover, drag and scroll without an engineer re-implementing the motion. Runtimes cover web, React, React Native, Flutter, iOS, Android, C++, Unity, Unreal and Defold, plus Framer, Webflow and Wix Studio. It is aimed at teams shipping interactive motion — onboarding, mascots, loaders, game UI — where Lottie's one-way playback is not enough.
npm install @rive-app/react-canvasPick Rive over Lottie when the animation must react to state — a toggle that morphs, a mascot that follows a cursor, a loader that branches on success or failure — because the State Machine exposes named boolean/number/trigger inputs you set from code, whereas Lottie only seeks a timeline. On the web use @rive-app/react-canvas for standard cases and the webgl2 build only when you need the Rive Renderer's advanced features; the runtimes are MIT but authoring the .riv still requires the paid editor above the free tier's 3-file cap. Budget for the wasm payload and always gate playback behind prefers-reduced-motion, which Rive does not handle for you.
Why it is here. The only mainstream tool where the designer's animation file is itself the interaction logic, which removes the usual animator-to-engineer handoff that kills motion quality in production.
- State Machine with code-settable inputs
- MIT open-source runtimes on 10+ platforms
- files reported up to 90% smaller than Lottie
- GPU Rive Renderer at 120fps
- used by Duolingo, Spotify, Google
Verified 2026-08-15. HTTP 200. https://rive.app/, https://rive.app/pricing, https://rive.app/docs/runtimes/getting-started, https://github.com/rive-app/rive-react/commits/main.atom
