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 mascot Star on GitHub

3.9 KB embed
Stays in your browser

Moss

Clawd

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.

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
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
- excited · on "success"
Step 3 · Share
Download one file. Paste two lines.
The mascot is one JSON file with its poses, moves and triggers. In a React app, install openmascot and render <Mascot>. On any other page, paste a script tag and an <open-mascot> tag. A GIF of a move and a PNG of a pose download from the same screen.
- React or any website
- Script from a CDN
- No backend, no account

Make · Moss252 / 252 cells

Animate · Moss0 poses · 0 frames · 0.00 s

hopPlay

#	Pose

+ Add pose

Share · moss.json6.3 KB

import { Mascot } from "openmascot/react";
<Mascot doc={moss} position="bottom-right" />

Features

Everything a small friend needs.

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

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.

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.