Show a mascot while your AI thinks
Your mascot thinks while your AI request runs, stays patient on long answers and celebrates when the result lands, with no flicker between clips. You need a mascot: Create your first mascot.
25 min · 33 credits · Web, iOS, Android
Do it in Studio
- Open your mascot in Studio, go to the Animations tab, press Create Animation and choose New image + animation.
- Fill in one row of the table below, keep Loop on, Standard and 5s, and press Generate · 11 credits. Repeat for the other two.
- When all three are ready, press Get Links, turn on Enable asset hosting and copy each animation's
transparent_video_movandtransparent_video_webmfrom Export JSON. Then go to step 4.
| Name | Starting image | Movement |
|---|---|---|
| Thinking | hand on chin, looking up thoughtfully | thinking, tapping its chin, eyes drifting up and back |
| Waiting | standing relaxed, patient and calm | gentle breathing, a small sway, a slow blink |
| Done | arms raised in celebration, big smile | one happy hop with arms up, landing back in place |
Do it with the API
You need a write key from API keys in MASKO_API_KEY and 33 credits (GET /v1/credits shows your balance). Never put the key in browser or app code.
1. Find your mascot
Copy your mascot's id.
curl https://api.masko.ai/v1/mascots \
-H "Authorization: Bearer $MASKO_API_KEY"2. Generate the three animations
One batch call runs all three in parallel. Each request draws a pose from image_prompt and animates it with animation_prompt; set animation_model to standard and keep loop: true.
curl -X POST https://api.masko.ai/v1/mascots/MASCOT_ID/generate-batch \
-H "Authorization: Bearer $MASKO_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"requests": [
{
"type": "animation",
"animation_model": "standard",
"name": "Thinking",
"image_prompt": "hand on chin, looking up thoughtfully",
"animation_prompt": "thinking, tapping its chin, eyes drifting up and back",
"duration": 5,
"loop": true
},
{
"type": "animation",
"animation_model": "standard",
"name": "Waiting",
"image_prompt": "standing relaxed, patient and calm",
"animation_prompt": "gentle breathing, a small sway, a slow blink",
"duration": 5,
"loop": true
},
{
"type": "animation",
"animation_model": "standard",
"name": "Done",
"image_prompt": "arms raised in celebration, big smile",
"animation_prompt": "one happy hop with arms up, landing back in place",
"duration": 5,
"loop": true
}
]
}'It returns 202 Accepted with one job per animation. A batch is not all-or-nothing: check that every entry in data.jobs has a job_id, and never resend the whole batch after an uncertain response. premium costs 31 credits per clip instead of 11.
3. Wait for the jobs
Long-poll each job until completed or failed, or use a webhook in production. A completed job carries urls.webm and urls.hevc.
# Holds the request open until the job finishes, up to 120 seconds.
# If the timeout comes first, you get the current status: ask again.
curl "https://api.masko.ai/v1/jobs/JOB_ID?wait=true&timeout=120" \
-H "Authorization: Bearer $MASKO_API_KEY" \
-H "Masko-API-Version: 2026-09-26"4. Play the thinking loop
Give the Masko player the Thinking animation's files (install it first). It loops it with its transparency on every platform.
<div id="mascot" style="width: 160px; height: 160px"></div>
<script src="https://cdn.jsdelivr.net/npm/@masko/player@0.1/dist/masko-player.js"></script>
<script>
MaskoPlayer.mount(document.getElementById('mascot'), {
clip: {
webm: 'https://assets.masko.ai/.../thinking-a1b2.webm',
hevc: 'https://assets.masko.ai/.../thinking-c3d4.mov'
}
});
</script>The Android file is the stacked_video asset (GET /v1/mascots/:id/assets), or transparent_video_android in the hosted links.
5. Switch between thinking, waiting and done
The Masko player switches clips without a flicker when they are in a canvas. Put the three animations in a canvas as three poses, with Any State moves on working, waiting and celebrate (an Any State move has no video of its own), release it and play the release as in Play a canvas. Your app then only says what is happening:
// mascot is the Masko player playing your canvas release.
async function ask(prompt) {
mascot.set('working', true);
const slow = setTimeout(() => mascot.set('waiting', true), 8000);
try {
const answer = await runYourModel(prompt);
mascot.fire('celebrate');
return answer;
} finally {
clearTimeout(slow);
mascot.set('working', false);
mascot.set('waiting', false);
}
}Thinking starts at the end of the loop on screen, Waiting takes over after 8 seconds, and Done plays when the answer lands. Give the Waiting move a higher priority than Thinking, so it shows while both are on.
What you get
- Three animations, Thinking, Waiting and Done: five-second Standard clips with their pose images.
- Every format: transparent WebM and HEVC
.mov,stacked_videofor Android and a plain MP4. Exports to Lottie, GIF and more are free. - Hosted links on
https://assets.masko.ai. For phones, turn on free 360 px size variants.
Using an AI agent?
Paste this into your coding agent, in your app's project, connected to the Masko MCP server (setup for Claude Code, Codex, Cursor and more) or with the Masko skill and an API key.
Add a loading mascot to this app with Masko, following
https://masko.ai/docs/tutorials/ai-loading-mascot
Use my mascot "MASCOT_NAME". Ask me if I have several.
Generate three Standard 5-second looping animations: Thinking, Waiting and Done.
Show me the cost first and wait for my OK. It should be 33 credits.
Never put my Masko API key in browser or app code.
Wait for the jobs, then use each job's urls.webm and urls.hevc.
Show Thinking while my AI request runs, Waiting after 8 seconds, and Done when
it returns: put the three in a canvas and play its release with the Masko
player (https://masko.ai/docs/player/canvas).