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.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗