Make a desktop pet
that reacts to everything.
Patata gets excited when your cursor comes close, kicks her legs when you pick her up, gets dizzy when you shake her, types when you type and falls asleep when you leave her alone. You build the app. Masko makes the character, all her animations and the state machine that decides which one plays.
restQuietly Got ThisWhat Masko made
One loop for each reaction and one animation for each move. Hover a clip to play it.
- Restloop
- Ooh, a Cursor!pointerHover
- Wheee, Up We GoheldContact
- Mashed and DizzyheldShake
- Dizzy landinglet go mid-shake
- Droppedlet go
- Keyboard Hurricaneworking
- Hey! Over Here!attention
- Potato Partycelebrate
- Full Potato Panicerror
- Napafter 8 rest loops
How it works
- 1
Make the character and one pose per reaction
Create your pet from a prompt or a picture, then make each pose as an image of the same character: rest, noticed you, dangling, dizzy, typing, calling out, party, panic and nap.
Create a mascot - 2
Connect the poses in a state graph
Each pose is a node with its own loop. Each arrow has the input that triggers it, such as heldContact for a drag. Most ways back to rest are the move played backwards, which is free.
Build a canvas - 3
Let Masko animate it, then play it in a window
Generate all makes every loop and move as transparent WebM and HEVC. Export the canvas and play it in a transparent window that floats above other apps.
Export a canvas
Some moves on Patata’s canvas
{
"edges": [
{ "id": "idle-to-dangling",
"conditionGroups": [
[{ "input": "behavior::heldContact", "op": "==", "value": true }],
[{ "input": "behavior::heldShake", "op": "==", "value": true }]
] },
{ "id": "dangling-to-mashed-and-dizzy",
"conditions": [{ "input": "behavior::heldShake", "op": "==", "value": true }] },
{ "id": "idle-to-typing-frenzy",
"conditions": [{ "input": "behavior::working", "op": "==", "value": true }] },
{ "id": "typing-frenzy-to-idle", "reverse": true,
"conditions": [{ "input": "behavior::working", "op": "==", "value": false }] },
{ "id": "idle-to-nap-time",
"conditions": [{ "input": "node::loopCount", "op": ">=", "value": 8 }] }
]
}The pet window, in Electron
// main.js: a frameless, transparent window above other apps
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
const pet = new BrowserWindow({
width: 240,
height: 240,
transparent: true,
frame: false,
hasShadow: false,
resizable: false,
alwaysOnTop: true
});
pet.loadFile('pet.html'); // plays the exported canvas
});Questions
Do I need a Masko SDK?
No. The export is JSON plus transparent videos, so your own player runs it. The playback guide shows the two-player handoff in HTML, React and Swift. The Masko Swift and TypeScript SDKs show hosted characters such as Ko in their own floating window.
How does the pet float above my other windows?
In Electron, use a frameless transparent BrowserWindow with alwaysOnTop, as in the code above, and play the WebM clips. In a Swift app, use a borderless NSWindow with a clear background at the floating level, and play the HEVC clips with two AVPlayer layers.
How does she move around the screen?
Move the window, not the video. While the pet is held, send the pointer position to the main process and move the window there. On release, drop it to the bottom of the screen while the landing clip plays.
Can my desktop pet talk?
Yes. Give the mascot a voice, then make a talking clip from a line of text: the mouth moves with the words and the clip comes with its sound. Play it when your app has something to say.
How much did Patata cost?
411 credits: 11 for the poses, including two redraws, and 400 for twenty animations, including one redo. The seven ways back are moves played backwards, so they are free.
Does it work on Windows?
The clips are transparent WebM and HEVC, so an Electron pet plays the WebM on Mac and Windows. A native Mac app plays the HEVC.