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, scenes 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

Masko player

The Masko player puts your mascot in a website or an app, with its transparency, on the web, React, iPhone, iPad, Mac, React Native and Android. Give it one animation and it loops it. Give it a released canvas and it switches clips by itself: your app only says what is happening, with set and fire.

This is Spike, playing in the Masko player. Hover him, grab him or press a button: the calls your app would send to the player show under him.

Idle

Hover him, grab him, or press a button.

// The calls your app sends show here.

Two ways to play

Play one animation

Loop one animation from its two hosted files. No backend and no API key, about 2 minutes.

Play a canvas

A mascot that reacts to your app: your backend fetches the release, your app calls set and fire.

Install

PlatformInstall
Web, any frameworknpm install @masko/player
React 17 or laternpm install @masko/player, then import from @masko/player/react
Web page without a build step<script src="https://cdn.jsdelivr.net/npm/@masko/player@0.1/dist/masko-player.js"></script>
iPhone, iPad, Mac and visionOSSwift package https://github.com/masko-ai/masko-player from 0.1.9, product MaskoPlayer
React Native and Exponpm install @masko/player-react-native
Androidai.masko:player, built from the repository until it reaches Maven Central

Web

  • It runs in Chrome and Edge 87, Firefox 79 and Safari 15 (iOS 15) or later.
  • The element sets the mascot's size. Without a height, the mascot is square and as wide as the element.
  • The script tag defines window.MaskoPlayer; it is a classic script, not a module.
  • With a Content Security Policy, allow 'wasm-unsafe-eval' in script-src and your clip host in media-src. The web README lists every rule and the Vite setting.

iPhone, iPad and Mac

In Xcode, choose File > Add Package Dependencies, enter https://github.com/masko-ai/masko-player, choose Up to Next Major Version from 0.1.9 and add the MaskoPlayer product to your app target. It runs on iOS 15, macOS 13, Mac Catalyst 15 and visionOS 1 or later. Show it with MaskoView in SwiftUI or MaskoPlayerView in UIKit and AppKit. The Apple README has every call.

React Native and Expo

npm install @masko/player-react-native
npx expo run:ios   # or: npx expo run:android

The package is an Expo module with the Swift and Android players inside, for Expo SDK 54 (React Native 0.81, new architecture), iOS 15.1 and Android 7 (API 24) or later. It has native code, so build the app after installing it. A bare React Native app installs Expo modules first (npx install-expo-modules) and runs pod install in ios/. On Android, keep the ABIs the player is built for with reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86_64 in android/gradle.properties. The React Native README has every prop and call.

Android

ai.masko:player is coming to Maven Central. Until then, build it from the repository as its Android README shows: scripts/build-android.sh, then ./gradlew :player:publishReleasePublicationToLocalRepository in android/, which writes ai.masko:player:0.1.10 to android/player/build/repo. Add that folder to your app's Maven repositories. It needs Android 7 (API 24) and Java 17. Show it with MaskoPlayerView.

What it handles

  • Transparency everywhere. It plays the file each platform shows with transparency: HEVC on Safari and Apple devices, WebM in other browsers and the stacked MP4 on Android. Apps that ask for it get the stacked AV1 file, two to three times lighter (file sizes).
  • No flicker. The next clip is shown only once its first frame is ready, and a move waits for the end of the loop on screen, so it starts from the same frame.
  • The page or app around it. It preloads the next clips, pauses while the page is hidden or the app is in the background, and shows a tap-to-play button when the browser blocks autoplay.
  • Sound. A clip's own voice is heard by default; setSound(false) on the web or sound set to false on Apple, Android and React Native mutes it. Browsers allow sound only after the person's first click or key press on the page; until then the player plays muted, and the voice is heard from the next clip or loop.

The player is open source (MIT) at github.com/masko-ai/masko-player: one Rust engine runs the canvas rules, with a player for each platform. The rulebook gives every rule.