Make a focus timer
where the mascot falls if you leave.

What Masko made

One loop for each pose and one animation for each move. Hover a clip to play it.

• Hangloop
• Sliphang → slip, when away
• Slippingloop
• Grab on againslip → hang, back in time, free
• Fallslip → fallen, after 10 s away
• Fallenloop

How it works

1. 1

   Make the character and its poses

   Create Mugi from a prompt or a picture, then make each pose as an image of the same character: hanging, slipping and fallen.

   Create a mascot
2. 2

   Connect the poses in a state graph

   Each pose is a node with its own loop. away moves Mugi from hang to slip and back, and fall drops it to the floor. The move back up is the slip played backwards, so it is free.

   Build a canvas
3. 3

   Let Masko animate it, then set the inputs

   Generate all makes every loop and every move. Your app sets away when the user leaves and fall after ten seconds away, and plays the matching move.

   Export a canvas

The moves on Mugi’s canvas

{
  "inputs": ["action::away", "action::fall"],
  "edges": [
    { "id": "hang-to-slip",
      "conditions": [{ "input": "action::away", "op": "==", "value": true }] },
    { "id": "slip-to-hang", "reverse": true, "reverseOfEdgeId": "hang-to-slip",
      "conditions": [{ "input": "action::away", "op": "==", "value": false }] },
    { "id": "slip-to-fallen",
      "conditions": [{ "input": "action::fall", "op": "==", "value": true }] }
  ]
}

Leaving the app, on the web

// setInput is your player: it plays the move whose condition now matches.
let timer;
document.addEventListener('visibilitychange', () => {
  setInput('action::away', document.hidden);
  clearTimeout(timer);
  if (document.hidden) {
    timer = setTimeout(() => setInput('action::fall', true), 10_000);
  }
});

Watch the whole story

The same app as a 27-second video: one session, one slip, one fall.

Questions

Related use cases

• Grow a character that evolves with your users →
• Build a focus or Pomodoro app with a little buddy →
• Show a mascot while your AI is thinking →