Skip to content

Use case · App mascot

A mascot for your app's 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, iOS and 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">

Wire it up

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 686 KB GIF on the page that matters most.

Examples

Guides from the gallery.

FAQ

App mascot questions.

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 4.4 KB gzipped. The same clip as a GIF is 686 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 80 credits from a prompt or 120 to rebuild your own art; the free plan includes 200 a month. Presets, canvases, the player and every export are free.

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