Skip to content

Use case · App mascot

An app mascot for the first five minutes.

New users quit where they get stuck. An animated mascot that waves hello, points the way and celebrates each finished step makes the first run feel guided, not abandoned.

Start from the onboarding templateUse your own mascot

Free to start · Web, React Native, iOS, Android · No card

axi · wave · 10 partslive vector, not a video

In your product

Put a friend where your users get stuck.

The moments that make people quit are the moments a character helps most.

app.ledgerly.com/welcome

Welcome to Ledgerly

Three steps and your books are live.

  1. 1Connect your bank
  2. 2Import last month
  3. 3Invite your accountant

A face on step one.

What you'd ship: <lumorig-player animation="wave" trigger="auto">

React Native, iOS, Android, Flutter

Play it in your native app.

Export each motion as vector Lottie, then use the Lottie player your platform already has. Your app decides which motion plays.

React Native and Expo

Guide.tsx
import LottieView from "lottie-react-native";

const MOTIONS = {
  idle: require("./mascot/idle.json"),
  welcome: require("./mascot/wave.json"),
  stepDone: require("./mascot/celebrate.json"),
  error: require("./mascot/sad.json"),
};

export function Guide({ moment = "idle" }) {
  return (
    <LottieView
      key={moment}
      source={MOTIONS[moment]}
      autoPlay
      loop={moment === "idle"}
      style={{ width: 160, height: 160 }}
    />
  );
}

iOS

SwiftUI
import Lottie

LottieView(animation: .named("wave"))
  .playing(loopMode: .loop)

Android

Jetpack Compose
val composition by rememberLottieComposition(
  LottieCompositionSpec.RawRes(R.raw.wave)
)
LottieAnimation(
  composition,
  iterations = LottieConstants.IterateForever,
)

Flutter

Dart
Lottie.asset(
  'assets/mascot/wave.json',
  width: 160,
  repeat: true,
)

Instant motion

Fifteen moves, ready before you've paid a cent.

Presets are fitted to your character's rig, so they play instantly and cost nothing. Need something specific? Ask for it in plain words.

same presets, any rig

Or ask for it

do a tiny victory hop, then look embarrassed about it

Added victory-hop · 1.6 s · loops

custom motions use credits · cost shown before you confirm

In a web app

Three triggers cover the whole flow.

The onboarding canvas starts with a wave, idles while people work, and returns to idle after every reaction, so you only fire events. The canvas guide shows how to add your own states.

onboarding.ts
const guide = document.querySelector("lumorig-player"); // onboarding canvas

guide.fire("hello");                                   // first screen
steps.on("complete", () => guide.fire("success"));     // each finished step
form.on("invalid", () => guide.fire("error"));         // a gentle sad beat

Why a character

Small moments that make people stay.

  • A welcome, not a wall of tooltips

    A wave on the first screen sets the tone before anyone reads a word.

  • Progress that feels like progress

    A small celebrate after each step makes a five-step setup feel like five wins.

  • Errors that don't sting

    A brief sad beat next to a validation message softens it without extra copy.

  • Empty states with a face

    Stills and illustrated scenes of the same character fill blank screens and emails.

  • Streaks and milestones

    Jump, dance and celebrate are free presets, ready for the day someone hits a streak.

  • Light enough for the first screen

    A few KB of vector instead of a 621 KB GIF on the page that matters most.

Examples

Guides from the gallery.

FAQ

App mascot questions.

How do I add a mascot to my React Native app?

Export each motion as vector Lottie, add the JSON files to your project and play them with lottie-react-native, which also works in Expo. Choose which file plays from your app's own events, as in the example on this page. The files are plain shapes with no expressions, and paid downloads have no embedded images. A Free file carries the small mark as an image.

Can it react to the user, like Duolingo's characters?

Yes, in a simple way: play a different motion for each event, such as a celebrate when a step is done. A native app swaps between Lottie files. Our interactive canvas, where one character moves between states, runs in the web player, so in a native app it needs a webview. If you need blended states running natively, Rive is built for that.

What does the onboarding template do?

It waves hello when it appears, idles alongside the user, celebrates each completed step and looks briefly sad on an error, then returns to idle. You fire three triggers from your code: hello, success and error.

Will it slow down my first screen?

The live player is about 8 KB gzipped and a character's two-second Lottie is about 6.6 KB gzipped. The same clip as a GIF is 621 KB.

Does it work in native iOS and Android apps?

Yes, through Lottie: export each motion as vector Lottie and play it with the standard Lottie players for iOS and Android. The interactive canvas (states that react to events) runs in the web player, for web apps and webviews.

Can it appear in empty states and emails too?

Yes. Export stills, stickers and GIFs for email, or place the character in an illustrated vector scene for banners and empty states. It is the same character everywhere.

Can I change the character after launch?

Yes. Recolour it, edit it in plain words or branch a seasonal look. Live embeds pick up the new version without a redeploy.

How much does it cost?

Creating a character is 100 credits from a prompt or 150 to rebuild your own art; the free plan starts you with 100, once, and your first character is on us. Presets, canvases and the player are free; downloads are included on Maker and Studio, and on Free 50 credits unlocks a character's downloads.

Give your first screen a friend.

Upload your mascot or describe one, then pick the onboarding template.

Drop a PNG, JPG or SVG anywhere here

or pick a file · free to start · no card

Start from an idea