Rive
Vector animation editor whose State Machine files run natively in app runtimes
Tier S · Best in classAnimation LibraryToolApprive.app
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-canvasFor an agent
Pick 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.
Facts
- License
- MIT, Commercial license
- Pricing
- Freemium, Subscription
- Framework
- React, React Native, Flutter, Vanilla JS, SwiftUI, Jetpack Compose, Framer, Webflow
- Styling
- Not applicable
- Distribution
- Web app / online tool, Hosted SaaS product, npm package, GitHub repository
- Platform
- Web, iOS, Android, macOS, Windows, Cross-platform
- Content type
- Code, Images / textures / backgrounds
- Agent readiness
- Readable open source, Structured documentation, Login required
- Accessibility
- Unknown
- Maturity
- Actively maintained
- Pricing detail
- Free $0 (3 files, 1 project, 10 MB assets); Cadet $9/seat/mo (max 3 seats, unlimited files, .riv export, 100 MB assets); Voyager $32/seat/mo (max 25 seats, libraries, hosted embeds, $20/seat agent credits); Enterprise $120/seat/mo (SSO, SOC2 Type II, custom runtime, $40/seat agent credits)
- Package
- @rive-app/react-canvas
Components it ships
3Helps you build
7Notable for
- 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
Provenance
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
Also in Motion & Interaction
6- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motion
- Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animation
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture