Skip to content
maskostudioDocs

All pages

  • Overview/docs/use-cases
  • Mobile app/docs/use-cases#mobile
  • Website/docs/use-cases#website
  • Desktop/docs/use-cases#desktop
  • AI agents/docs/use-cases#agents
  • Videos/docs/use-cases#videos
  • Brand/docs/use-cases#brand
  • Start building/docs/ai-agents
  • Set up once/docs/ai-agents#set-up-once
  • Ask in plain words/docs/ai-agents#ask-in-plain-words
  • What your agent does/docs/ai-agents#what-your-agent-does
  • MCP server/docs/mcp
  • Masko for Cursor/docs/ai-tools/cursor
  • Masko in ChatGPT/docs/ai-tools/chatgpt
  • Start here/docs/tutorials#start-here
  • All tutorials/docs/tutorials
  • Create your first mascot/docs/tutorials/first-mascot
  • Create an animated character/docs/tutorials/first-animation
  • Make a character talk/docs/tutorials/make-it-talk
  • Put your mascot on your website/docs/tutorials/mascot-on-your-website
  • Guide onboarding with a talking mascot/docs/tutorials/web-onboarding-mascot
  • Add a mascot that celebrates progress and welcomes users back/docs/tutorials/web-progress-companion
  • Add a talking support mascot in the bottom right/docs/tutorials/web-support-mascot
  • Show a mascot while your AI thinks/docs/tutorials/ai-loading-mascot
  • Give your AI agent a face/docs/tutorials/ai-agent-face
  • Animate the mascot you already have/docs/tutorials/animate-your-mascot
  • How to make Telegram stickers/docs/tutorials/telegram-stickers
  • How to make Discord stickers/docs/tutorials/discord-stickers
  • Quickstart: your first animation/docs/quickstart
  • Terminal quickstart/docs/terminal
  • API keys and workspaces/docs/authentication
  • CLI browser login/docs/authentication/cli
  • How mascots work/docs/how-mascots-work
  • Credits and costs/docs/credits
  • From text/docs/create/from-text
  • From an image/docs/create/from-image
  • From a website/docs/create/from-website
  • From a brand book/docs/create/from-brand-book
  • Reference images/docs/manage/references
  • What you can generate/docs/generation
  • Pose-to-animation walkthrough/docs/generate/workflow
  • Images and poses/docs/generate/images
  • Animations/docs/generate/animations
  • Talking animations/docs/generate/talking
  • Logos, backgrounds and stickers/docs/generate/design-assets
  • Cursor follower/docs/generate/cursor-follower
  • Batch generation/docs/generate/batch
  • Image and video exports/docs/manage/media-exports
  • Canvases and releases/docs/canvas
  • Build a canvas/docs/canvas/build
  • Canvas templates/docs/canvas/templates
  • Generate canvas assets/docs/canvas/generate-all
  • Export a canvas/docs/canvas/export
  • Overview and demo/docs/player
  • Play one animation/docs/player/one-animation
  • Play a canvas/docs/player/canvas
  • Hosting and file formats/docs/generate/cdn
  • File sizes/docs/generate/file-sizes
  • Float a mascot on your Mac/docs/integrations/desktop
  • Jobs and polling/docs/manage/jobs
  • Webhooks/docs/manage/webhooks
  • Manage mascots and assets/docs/manage/collections
  • All endpoints/docs/reference
  • Requests and responses/docs/reference/conventions
  • Errors and recovery/docs/reference/errors
  • Command line reference/docs/terminal/commands
  • TypeScript SDK/docs/sdk/typescript
  • Changelog/docs/reference/changelog
  • Migrate to mascots and canvases/docs/manage/studio-migration
Get an API key
Documentation

Play one animation

Give the Masko player one animation's files and it loops it with its transparency, with no flash between loops and with the animation's own voice when it has one. Hosted links do not expire, so this needs no backend and no API key. Install the player for your platform first.

Get the files

Turn on hosting for the mascot, then copy the animation's links from Get Links in Studio or from the Get Links JSON. Put your mascot on your website shows each step.

PlatformFiles
Web and Reacttransparent_video_webm and transparent_video_mov (HEVC)
iPhone, iPad and Mactransparent_video_av1 (stacked AV1), or transparent_video_mov (HEVC)
Androidtransparent_video_av1 (stacked AV1) on Android 10 and later, else transparent_video_android (the stacked MP4)
React Native and Fluttertransparent_video_mov and transparent_video_android

The stacked AV1 file is two to three times lighter than HEVC or the stacked MP4: pass its link in place of the HEVC file in Swift, or of the stacked MP4 in Kotlin. Phones before Android 10 have no AV1 decoder, so they need the stacked MP4. The Mobile filter in Get Links lists only the AV1 links. Animations made before October 27, 2026 have no AV1 file yet: the Settings tab shows how many files each size is missing, and Sync makes them.

Play it

import { mountMascot } from '@masko/player';

mountMascot(document.getElementById('mascot'), {
  clip: { webm: 'https://assets.masko.ai/.../wave.webm', hevc: 'https://assets.masko.ai/.../wave.mov' }
});

The player reads the file's length and loops it. A clip whose length cannot be read plays nothing and reports the error event with clip_failed. For visitors who turn off animations, pass autoPlay: !matchMedia('(prefers-reduced-motion: reduce)').matches on the web: the player then shows the first frame and waits.

Switch between animations

A new clip starts a new player, so the mascot can blink between two animations. To switch between animations, or to make the mascot react to your app, put them in a canvas and play its release: Play a canvas.