VibeNanny

⚡ Mascot state machine

Build a mascot
state machine.

Connect your mascot’s poses on a graph. Vibe Nanny generates every move between them, and your app decides where the mascot goes next.

Build your state machineSee the code
Now: RestUnlocked evolution: 0/2

Click a state.

Feed him and play with him to unlock his evolution.

How it works

States, moves,
and one input at a time.

01

Draw the states

Each state is a pose: resting, hungry, playing. Make them all from one character.

02

We animate every arrow

Describe how the mascot gets from one pose to the next. Reverse moves are free.

03

Your app picks the path

When something happens, set an input. The mascot follows the arrows to the matching state.

States can change who it is

Bao listened to music.
Then he evolved.

A companion can evolve once, shaped by what happened to it. Both forms live in one graph as variants of the same mascot, so he still looks like himself.

Now: RestUnlocked evolution: 0/2

Click a state.

Feed him and play with him to unlock his evolution.

try feeding him first.

Like your favorite learning apps

Right answer.
Happy mascot.

Many apps move their characters with a state machine: each answer sets an input and the mascot lands in a state that reacts to it. Build the same for your product.

  • 1Each event sets an inputCorrect, wrong, streak, idle.
  • 2Each reaction is a stateCheer, encourage, celebrate, rest.
  • 3We generate the movesFrom your mascot’s own images.
9:41●●●

Language app

Lesson complete!

You can now introduce yourself.

Continue

From Studio to your code

Set an input.
Your mascot reacts.

import { MascotPlayer } from "@vibenanny/player";
const player = await MascotPlayer.load({
  canvas: "CANVAS_ID",
  element: document.querySelector("#mascot"),
});
// When the user answers correctly…
player.setInput("answer", "correct");
// …and when they go quiet for a while.
player.setInput("idle", true);
▶

Web player

Drop the player into any page and drive it with inputs.

⌘

Mac runtime

Run the same graph as a floating desktop mascot.

See the Mac runtime ↗

The little details

Common questions.

A graph of poses (states) connected by animated moves, driven by inputs from your app.

You don’t draw or rig anything: the moves are generated from your mascot’s images.

Yes. Variants let a character evolve while staying recognisable.

Yes, with the web player or the Mac runtime.

Only one direction. Reverse moves are free.

Start with a little character

Make something
with personality.

Start with one character. Give it every pose, move and line your product needs.

Build your state machineExplore the API