Add a mascot.

The player is one small file. It runs on any page, in React, and in native apps through WebP or HEVC.

Quick start

Load the script once. Place the element where the mascot should stand. Give it a size with CSS or with the width and height attributes.

The player shows the poster first, so your page paints without waiting for video. It downloads the clip when the mascot is close to the screen and pauses it when the mascot leaves.

Every export from the studio has a ready snippet on the Embed tab with your own CDN path.

html

<script type="module" src="https://beamyn.com/player.js"></script>

<beamyn-player
  pack="https://cdn.beamyn.com/m/bloop/pack.json"
  width="320" height="320"
  label="bloop, a mascot"></beamyn-player>

<script>
  // one value, one feeling: wave, cheer, laugh, cry, angry or shrug
  document.querySelector("beamyn-player").state = "cheer";
</script>

Attributes

src: Path of the clip without a file extension. The player adds .hevc.mov on Apple WebKit and .webm everywhere else.
poster: A still image shown at once. It is also the image users see when they prefer reduced motion.
label: A short description for screen readers.
pack: URL of a pack.json with named states. Use it when one mascot has several animations.
state: The name of the state to play: idle, wave, cheer, laugh, cry, angry or shrug. Change it at any time. A feeling plays once and the mascot returns to idle.
prefetch: With a pack: download the other states while the page is idle, so a new state starts at once.
defer: Start the video after the page has loaded. Use it for the mascot at the top of a page.
manual: Do not start on its own. Call play() when you want the mascot to move.
follow: Tilt the mascot towards the pointer. It does nothing on touch screens or with reduced motion.

Methods

react(name): Play a short motion on top of the current clip, with no extra file. Names: hop, shake, nudge, pulse.
play(): Start playing. Needed for manual players.
pause(): Stop playing and keep the current frame.

Packs with states

One mascot often needs several moods. Export a pack and the studio writes a pack.json next to the clips. Point the player at it and set state when your app changes.

A state with "loop": false plays once and then moves to the state named in next.

Platforms

Chrome, Edge, Firefox and Android play WebM with alpha.
Safari, iOS and macOS play HEVC with alpha.
React Native plays the animated WebP through expo-image.
Players without alpha support can use the stacked MP4.

{
  "initial": "idle",
  "poster": "poster.webp",
  "states": {
    "idle":  { "webm": "idle.webm",  "hevc": "idle.hevc.mov", "loop": true },
    "laugh": { "webm": "laugh.webm", "hevc": "laugh.hevc.mov", "loop": false, "next": "idle" },
    "cry":   { "webm": "cry.webm",   "hevc": "cry.hevc.mov",   "loop": false, "next": "idle" }
  }
}