PNG to Rive

Turn a PNG into a Rive file with 17 animations.

Upload one PNG, JPEG or WebP of your character. You get a .riv that is already rigged, keyframed and wired: a mood number for 10 loops, triggers for 6 one-shots and a launch intro — ready for web, iOS, Android, Flutter and React Native.

Try it with your character See plans

Input: 1 PNG, JPEG or WebP, ≥ 512 px
Output: .riv + MP4, WebM, MOV, GIF, code
Turnaround: Usually 1–2 hours
Plan: Studio, $29/month

Live Rive file

Loops

Play once

This is the actual .riv our engine delivers, playing in your browser — the same state machine you drive from your app with one number input and a trigger per one-shot.

What are the best PNG to Rive animation tools?

The main options are the Rive editor (import the PNG, add meshes and bones, build the state machine yourself), Rive's in-editor AI Agent on paid plans, a generator such as Charmotion that outputs a .riv with 17 animations from one image, and Rive Experts hired through Contra for custom work.

Best PNG to Rive Animation Tools in 2026

What's inside the .riv

Three state machines, one file

CharacterViewModelMachine — driven by the Character view model (Data Binding): number mood plus one trigger per reaction. Required by Rive's new Apple runtime and recommended everywhere.

CharacterStateMachine — the same graph with classic inputs, for runtimes and code that still use them.

LaunchStateMachine — the intro plays once and settles on idle.

17 animations

Loops (mood 0–9): idle · happy · wave · thinking · sad · loading · listening · talking · sleeping · attention.

One-shots (triggers): success · error · yes · no · enter · exit — each plays once, then returns to the current mood.

Launch: a 2.6 s intro that ends on idle.

Flat artwork is traced into vector parts (our demo .riv files are 36–41 KB); 3D or detailed art keeps its pixels, so its file is larger (about 1 MB for Aegis).

Drop it into your app

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

const r = new Rive({
  src: "/mascot.riv",
  canvas: document.querySelector("canvas"),
  stateMachine: "CharacterViewModelMachine",
  autoBind: true,          // binds the Character view model
  autoplay: true,
  onLoad: () => {
    const vm = r.viewModelInstance;
    vm.number("mood").value = 5;       // loading
    vm.trigger("success").trigger();   // plays once, back to mood
  },
});

Web and React snippets use Data Binding; a SwiftUI file for each Apple runtime is included too.

Prefer to build it yourself?

You can do the same by hand in the Rive editor: import the PNG, add meshes and bones, keyframe every state and wire the state machine. Our step-by-step PNG to Rive guide covers it. Charmotion is for when you'd rather spend those days on your product.

Real output

Delivered files, exactly as you'd download them.

MP4 All plans

1080 × 1080 at 60 fps. Here: Pip’s wave, straight from the delivered file.

Transparent WebM & MOV Studio

Alpha channel included — the checkerboard shows through. MOV is HEVC with alpha for Apple apps and editors.

Rivet thinking — GIF output — GIF All plans
Light previews for docs, email and chat. Rivet’s “thinking” loop.

9:16 launch video All plans

1080 × 1920 for stories and splash screens. Bolt’s launch intro.

pip.riv · 40 KB

CharacterStateMachine: number input mood
0–9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine: launch → idle, plays once

Rive state machine Studio

One tiny vector file instead of 17 videos. It’s what powers the demo at the top of this page.

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

export function Pip({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/pip.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Paste-ready code Studio

Web, React and SwiftUI components named after your character.

Formats included per plan
Format	Specs	Best for	Starter	Studio & Expert
MP4	1080 × 1080, 60 fps, all 17 animations	Apps, socials, decks, product videos	Included	Included
9:16 launch video	1080 × 1920 MP4	Stories, Reels, splash screens	Included	Included
GIF	480 px previews	Docs, email, chat, README	Included	Included
Rive (.riv)	Vector; Data Binding view model + legacy inputs: mood for loops, triggers for one-shots, launch machine	Interactive apps and sites (web, iOS, Android, Flutter)	Not included	Included
Transparent WebM	VP9 with alpha, 1080 × 1080	Web overlays on any background	Not included	Included
Transparent MOV	HEVC with alpha (ProRes 4444 on request)	Final Cut, Keynote, iOS, Safari	Not included	Included
Code	Web (HTML), React and SwiftUI components	Paste in and ship	Not included	Included
Download all (.zip)	Everything in one archive (MOVs separate)	Hand-off to your team	Included	Included

Plans

Pick the formats you need.

The .riv file is part of Studio and Done with an expert. Starter ($4.99/month) delivers MP4, GIF and the 9:16 video only. Prices in USD; tax is calculated at checkout by Polar.