OpenMascot
Open sourceDraw one in minutes · no account

Pixel mascots for every website.

A tiny pixel-friend for your app that reacts to hovers, clicks, signups, errors and events.

Make a mascotStar on GitHub
  • Two lines of HTML
  • 3.9 KB embed
  • Stays in your browser
How it works

Make. Animate. Share.

Three steps in the studio, all in your browser: draw your character, give it moves, and take it with you.

  1. Step 1 · Make

    Draw your character on a 24 × 16 board.

    Start from Clawd, Moss or a blank canvas. Paint with the pencil, drag for a run of cells, and let the mirror pencil draw the other half. Fill paints a whole area; right click erases. Every pose is a small edit of default.

    • Live preview as you draw
    • Mirror pencil for symmetry
    • Autosaves in your browser
  2. Step 2 · Animate

    Give it moves, then say when they play.

    A move is a few poses shown one after another, like a flipbook: each row holds a pose for some frames, and can push it down or slide it sideways. Start from Bounce or Sway, start empty, or duplicate a move. Then pick what sets each one off: a hover, a click, page load, a timer, or an event from your own code.

    • sway · on hover
    • idle · every 6 s
    • celebrate · on "success"
  3. Step 3 · Share

    Download one file. Paste two lines.

    The mascot is one JSON file with its poses, moves and triggers. Drop it next to embed.js and paste the two lines the studio gives you. A GIF of a move and a PNG of a pose download from the same screen.

    • Works on any website
    • No build step
    • No backend, no account
Features

Everything a small friend needs.

Triggers, poses, exports, a tiny player. Nothing you have to host, nothing that phones home.

Moss on the 24 by 16 drawing board

A simple editor

Pencil, mirror pencil, eraser and fill. Drag for a run of cells, and undo is ⌘Z away.

hoverclickevery 6 semit("success")

Triggers, not timelines

Page load, click, hover, every few seconds, or Mascot.emit() from your code. Each move plays once, then rests on default.

  • default
  • wink
  • tall
  • squish

A handful of poses

Each pose is one drawing. Start from default and change only what differs: the eyes, the arms, the mouth.

  • .json
  • .gif
  • .png

Takes any shape

JSON for the embed script, a GIF of a move for READMEs and chat, a PNG of a pose. No account.

3.9KB

A tiny player

3.9 KB gzipped, one canvas per mascot, no dependencies. Several on a page stay fast.

  • prefers-reduced-motion: on
  • aria-label="Moss mascot": on

A good guest

Respects reduced motion, carries an accessible name, and the mascot file is plain data, never code.

ClawdMoss
Phase 1 · open now

Your site is missing someone.

Open the studio, start from a sample or a blank canvas, and have a mascot on your page before your coffee cools.

Make a mascotRead the code
"hover" → sway"click" → celebrate