For iOS apps

An animated mascot for your iOS app, with SwiftUI code.

One image in; out comes a Rive file your SwiftUI views drive with a mood number and triggers, ready-made SwiftUI files for the legacy and new Apple runtimes, transparent HEVC MOV for AVFoundation, Keynote and Final Cut, and a launch animation for your first screen.

Try it with your character See plans

Code: SwiftUI — legacy + new Apple runtime
Files: .riv, HEVC-alpha MOV, MP4, GIF
Splash: LaunchStateMachine: intro → idle
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.

How do I add an animated mascot to SwiftUI?

Add the Rive Swift package, put the mascot's .riv in your bundle, and show it with RiveViewModel(fileName:stateMachineName:).view(). Set a number input such as mood to switch loops and fire triggers for one-shots, or use the new Apple runtime with Data Binding. Charmotion sets ship with ready SwiftUI files for both runtimes.

Animated Onboarding Mascot in SwiftUI

SwiftUI, ready to paste

import SwiftUI
import RiveRuntime   // Swift Package: rive-app/rive-ios

struct MascotView: View {
    @StateObject var mascot = RiveViewModel(
        fileName: "mascot",                       // mascot.riv in your bundle
        stateMachineName: "CharacterStateMachine"
    )
    var mood: Double = 0                          // 0 idle · 1 happy · 2 wave …

    var body: some View {
        mascot.view()
            .aspectRatio(1, contentMode: .fit)
            .onAppear { mascot.setInput("mood", value: mood) }
            .onChange(of: mood) { _, new in mascot.setInput("mood", value: new) }
    }

    func play(_ reaction: String) { mascot.triggerInput(reaction) }  // "success"
}

Shortened from the delivered file, which names the view, mood enum and reactions after your character.

Both Apple runtimes

{Name}View.swift uses the legacy RiveViewModel with state machine inputs. {Name}NewRuntimeView.swift uses the new async runtime with Data Binding through the Character view model.

Launch screen

A separate LaunchStateMachine plays the 2.6 s intro once and settles on idle — show it on your first screen after the static launch screen. It fires no completion event, so time the hand-off to the intro length.

Respect Reduce Motion

Check accessibilityReduceMotion and keep the mascot on idle (or a still poster) for people who ask for less motion.

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.

SwiftUI code, the .riv and HEVC-alpha MOV are in Studio ($29/month). Starter ($4.99/month) has MP4, GIF and the 9:16 video. Prices in USD; tax is calculated at checkout by Polar.