Rive Animation Engine

Rive is a real-time vector animation platform from Rive Inc. It combines a browser-based visual editor with lightweight runtimes so that motion design, UI animation, and even interactive game art are authored once and played back natively across many frameworks. At rive.app, designers build animated art that developers glue into apps with a few lines of code.

The core idea is a small binary file format, .riv, that holds vector art, timelines, and a State Machine. Because the animation is driven at runtime a single file can produce many states and transitions, reacting to inputs instead of playing one fixed movie. This makes Rive a fit for everything from icons and loading spinners to full game character rigs.

Rive exposes open-source runtimes for Flutter, React, Vue, Svelte, Angular, Unity, iOS, Android, and the web. Its engine has grown into a renderer and a GameKit targeting high-performance vector game rendering, so it now spans both UI animation and real-time game visuals. See the official help and docs at help.rive.app.

• Real-time vector animation - resolution-independent art that scales crisply on any display
• State Machine - drive animations with inputs (triggers, booleans, numbers) and transitions
• Browser-based editor - design, rig, and animate without desktop installation
• Compact .riv format - a single binary file carries art, timelines, and logic
• Multiple runtimes - Flutter, React, Vue, Svelte, Angular, Unity, iOS, Android, and web
• Advanced rigging - bones, mesh deformation, and skinning for characters
• Text, events, and layout - editable text, runtime events, and responsive layout controls
• High-performance renderer - a custom vector engine and GameKit tuned for 120 frames per second

Rive separates authoring from playback. In the editor you create vector artwork and arrange animation timelines, then connect them into a State Machine that defines which animation plays given certain inputs. Everything is exported to a single .riv file that runtimes load natively.

Rive Editor (art, rig, timelines, State Machine)
        |
        export -> .riv binary
        |
   Runtime (Flutter / React / Unity / ...)
        |
   State Machine evaluates inputs each frame
        |
   Vector renderer draws the result

The State Machine is the heart of interactivity. Instead of looping a static animation, a game or app feeds inputs such as "hover", "pressed", or "health" via the runtime API, and Rive transitions between states smoothly. This supports hover and press states for buttons, reactive loaders, character idle-to-run blends, and UI that responds to data, all from one asset.

Because playback is computed locally by the vector renderer, there is no need to export video or sprite sheets. Files stay small and updates to the animation can be shipped as a single changed .riv asset.

The Rive Editor is a full design and animation tool that runs in the browser. It provides vector drawing tools, a timeline for keyframing, rigging with bones and mesh deformation, and a State Machine authoring panel, all supporting real-time preview so you see exactly what the runtime will output.

• Vector drawing - shapes, paths, fills, and gradients for scalable art
• Timeline animation - keyframe animation of transforms, colors, and effects
• Rigging - bones, mesh deform, and skinning for characters and characters-in-UI
• State Machine editor - visually wire states, transitions, and inputs
• Layout and text - responsive alignment and runtime-editable text nodes
• Play mode and preview - test states and transitions before export

The editor offers a free tier for personal use and paid tiers with advanced features and collaboration. Because it is file-based and export-driven, non-engineers can own animation while developers just consume the finished .riv.

Rive ships first-party, largely open-source runtime libraries so the same .riv asset works across platforms. Flutter was notably the first framework Rive integrated with, which is why Rive is common in Flutter apps and games.

Platform	Runtime
Flutter	rive package on pub.dev
React / Web	@rive-app/react-canvas, @rive-app/webgl
Vue / Svelte / Angular	Official bindings for each framework
Unity	Unity package for in-game and UI animation
iOS	Native Swift runtime
Android	Native Kotlin/Java runtime
Godot / React Native	Community bindings and packages

All runtimes expose a common API to load a .riv file, grab an artboard, instantiate a State Machine, set inputs, and render. This consistency means a team can author once and reuse animation logic across mobile, web, desktop, and game engines with minimal per-platform work.

Beyond UI animation, Rive has extended into game development with a dedicated Renderer and GameKit. The GameKit is engineered for high-performance vector gameplay, initially targeting iOS and macOS (Apple Silicon) platforms. Flutter was the first framework Rive chose to integrate with for this game tooling.

• Vector rendering - the Renderer draws all scene vectors, giving crisp, scalable game visuals
• Animation loop control - manage the flow of every Rive animation in a scene
• State Machine inputs - change animations on the fly for reactive game behavior
• Component access - inspect and update individual parts of the drawing structure
• Scene layout - precise positioning tools to place animated elements
• 120 fps target - draws a large number of vectors smoothly for high-refresh displays
• Tilemap support - authoritative tutorials show building animated 2D levels with tiles

This makes it plausible to build entire scenes where everything visible is animated by Rive, including tile-based levels, characters, and HUDs. Because the GameKit is built with Flutter, standard Flutter interactivity such as keyboard and mouse input can be layered on top.

The workflow is: design in the editor, export a .riv, then load it in your chosen runtime. In Flutter, add the rive package and mount a RiveAnimation.asset widget:

# 1. Add the runtime
flutter pub add rive

# 2. Drop the asset in and render a state machine
RiveAnimation.asset(
  'assets/robot.riv',
  stateMachines: ['State Machine 1'],
  onInit: (artboard) {
    final smi = artboard.stateMachine;
    smi.setInput('hover', true);   // drive the State Machine
  },
);

For the web, useRive from the React runtime handles setup, and native runtimes load files with a similar small set of calls. Regardless of platform, the same .riv exports works unchanged, which is the main appeal of the Rive workflow.

Rive is often compared with other animation and motion tools. Its differentiators are real-time interactivity through State Machines, a vector renderer, and lightweight runtimes.

Criteria	Rive	Lottie	Spine	After Effects + Video
Format	Vector (.riv) + logic	JSON (Bodymovin)	JSON atlas + images	Video / raster
Interactivity	State Machine inputs, real-time	Limited controls / markers	Animation events	None (pre-rendered)
File size	Small, scalable vector	Small JSON, scalable	Medium (atlas images)	Large video
Game support	GameKit renderer, 120 fps	Mainly UI/motion	Strong (2D skeletal)	Heavy for real-time
Authoring	Browser editor	Via After Effects plugin	Desktop Spine editor	Desktop AE
Runtimes	Flutter, web, Unity, native	Broad (mobile, web)	Broad (game engines)	Broad (players)

Rive vs Lottie: Lottie is excellent for playing After Effects motion graphics as JSON and has extremely broad SDK coverage. Rive goes further with interactive State Machines and a vector renderer, but if your studio's art pipeline is AE-centric, Lottie is the lower-friction drop-in for static plays while Rive suits interactive or game-driven animation.

Rive vs Spine: Spine is a specialist 2D skeletal animation tool built for game characters, with deep integration into game engines. Rive's GameKit is newer but adds fully vector, real-time rendering and state machines; Spine excels for complex character animation in established game pipelines, whereas Rive covers both UI and gameplay animation with broader platform runtimes.

Rive vs After Effects + video: Pre-rendered video gives full artistic freedom but large file sizes and no runtime interactivity or scaling. Rive keeps assets small and scalable and lets a state machine drive the animation live, which suits apps, games, and responsive UIs where static video cannot adapt.

Rive has an active community hub at rive.app/community where designers share templates and assets. Official learning materials include the Rive help center, dedicated tutorials for the GameKit (such as building tilemaps and adding keyboard and mouse interaction), and per-runtime documentation.

Open-source runtimes live on GitHub under github.com/rive-app, including the Flutter package source and community example games such as tappy-turkey and the Rive workshop game find-the-dog, which demonstrate multiple artboards, state machines, and runtime integration in real projects.