Mascot Booth
Mascot Booth is a free tool by Zeke & Learn. Give it a pose sheet of your
mascot and a voice, and it gives you back a lip-synced talking clip you can drop into any video. No account, no
uploads: everything runs in your browser.
Do I need to install anything?
No. If you want a talking clip of your mascot, just
open the web app in Chrome or Edge on a computer. There is nothing
to download, no account and no coding.
This repo also has an engine, and that part is optional. It is only for people who already use an AI coding
agent, Claude Code or Codex. Once installed, you can ask
your agent for a whole explainer video ("make a talking explainer about how DNS works") and it writes the script,
makes the voice, adds motion graphics and sound, and renders the finished film with your mascot as the presenter.
| The web app | The engine (optional) |
|---|
| Who it's for | Everyone | Claude Code or Codex users |
| What you get | A talking mascot clip (transparent WebM or MP4) | Whole word-synced explainer films |
| Install | Nothing. Open it in your browser | Node.js, ffmpeg, then node install.mjs |
| Skills needed | None | Comfortable with a terminal |
If you don't use Claude Code or Codex, you can ignore everything about the engine below.
How the web app works
Features
Web app
- Five simple steps: make your poses, upload the sheet, set up the face, add a voice, animate and export.
- Poses from ChatGPT. Copy the ready-made prompt, attach a picture of your mascot, and you get a sheet of
6 poses. The app cuts each pose out and lines them up on one baseline.
- Face setup with a live preview. The app guesses where the mouth and eyes are. Drag or draw a box to fix
anything that's off, and watch the mascot talk and blink while you do.
- Four ways to add a voice: upload an audio file, record with your mic, use your own ElevenLabs key, or try the
sample voice first.
- Sharper lip sync for your own recording. Times every letter you said, so the mouth closes on M, B and P, rounds
on O and bites on F. It runs on your computer (see Under the hood).
- Optional drawn mouth sheet. A second prompt gets you 9 drawn mouths for different sounds, so the talking looks
drawn instead of stretched. Skip it and your mascot talks with its own mouth.
- Export a transparent WebM to layer over anything in Canva, CapCut or Premiere, or an MP4 on the background
you pick (Green screen keys out in any editor).
- Export for Claude Code. Saves your mascot as a presenter folder (zip), so Claude Code or Codex can direct whole
films with it.
- English and Taglish UI, switchable at the top.
Engine (optional, for Claude Code / Codex)
- Letter-timed lip sync from ElevenLabs (it returns a time for every letter) or from your own recording.
listen: turns your own recording into a take with a time for every letter, using forced alignment (the method
WhisperX uses) with a small speech model that runs on your computer. On an 85 s Taglish take, word starts landed
27 ms from ElevenLabs' own timestamps at the median.prepare --audio: listen and prepare a take in one step.- Sync proof (
check): after every render, the engine listens to the finished video, times every word again and
checks the voice still lands where the film was timed. It prints IN SYNC, or how far off and which words. On real
renders it measured 1-2 ms; a test copy with the voice moved 50 ms late was caught.
- Motion library: springs, word-synced kinetic type, pixel-block wipes, camera pushes, presenter zooms, particle
bursts, a live waveform, and terminal and code panels that type themselves. Every frame is a pure function of time,
so previews, stills and the final render match exactly.
- Synthesized sound effects: whooshes, pops, key ticks, impacts, risers and 8-bit blips are generated from math at
the frame their visual fires. No sample packs, nothing to license. The mix is mastered toward -14 LUFS with a -1 dBTP
ceiling.
- Mascot-only transparent clips: just your character talking, directed by a small
direction.json, rendered as a
transparent WebM (or ProRes 4444 .mov).
- Node only: no Python. Works on Windows, macOS and Linux.
Quick start
Use the web app
Open https://zekeandlearn.github.io/mascot-booth/ in Chrome or Edge on a computer. That's it. (Exporting video
needs Chrome or Edge.)
Run the web app on your own computer (optional)
If you'd rather run your own copy, you need Node.js 20 or newer. The web app has no
dependencies to install.
git clone https://github.com/zekeandlearn/mascot-booth.git
cd mascot-booth
node tools/serve-app.mjs
Then open http://localhost:4780.
Install the engine (optional, for Claude Code / Codex)
Skip this unless you use Claude Code or Codex.
The easy way: let your agent do it. Open Claude Code or Codex and paste this:
Install Mascot Booth for me from https://github.com/zekeandlearn/mascot-booth.
1. Check that Node.js 20 or newer, git and ffmpeg are installed. If something is missing,
tell me what and how to install it on my system, and wait for me before installing it.
2. Clone the repo into ~/mascot-booth (or a folder I name), then run `node install.mjs` inside it.
That installs the dependencies and the mascot-booth skill, then runs `doctor`.
3. Show me the doctor output and explain anything marked MISSING.
4. Tell me to restart you so the mascot-booth skill loads, and what to say to make my first video.
Or by hand. You need Node.js 20+, git and ffmpeg on your PATH.
npm install also downloads a headless Chrome for rendering.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
