Whiteboard Animation Skill for Muse
A hand that draws your explainer, stroke by stroke, in sync with the narration.
- What
- A hand that draws your explainer, stroke by stroke, in sync with the narration.
- Cost
- Free
- Needs
- a web browser to open the single-file HTML output; optional: npx + Playwright for the packaged seek-shot/screenshot verification harness; Remotion only if you want a narrated MP4 export instead of HTML.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
VideoScribe-style "a hand draws your explainer" animations: the core mechanic animates SVG stroke-dashoffset so paths draw themselves while a marker hand tracks the exact drawing tip frame by frame via getPointAtLength — per-letter handwriting in reading order, staggered multi-stroke reveals, erase/wipe transitions between sections, and draw pacing calibrated to the voiceover (~2.3 words/sec), one element at a time, never two at once. It covers converting art into single-stroke open paths in draw order, fill-after-outline coloring, marker-hand nib calibration, and a prefers-reduced-motion fallback that shows the finished board. The deliverable is one self-contained HTML file (single master timeline, a ?t=N seek harness to freeze any moment), verified with packaged scripts that headless-screenshot mid-stroke frames to prove the hand nib sits exactly on the draw tip. Discovered via skills.sh. Honest note: the output is an animated HTML scene, not a rendered MP4 — a full narrated video needs a Remotion composition (documented as the upgrade path); artwork must be single-stroke open paths, so filled illustrations need retracing as line art. Skill Harbor never reviews the code, review it yourself before use. Not verified.
Curated by Skill Harbor — free, open-source skill (MIT) by @iart-ai.
Version:
Install
Prerequisites: a web browser to open the single-file HTML output; optional: npx + Playwright for the packaged seek-shot/screenshot verification harness; Remotion only if you want a narrated MP4 export instead of HTML. Install "Whiteboard Animation Skill for Muse" for me. Build VideoScribe-style whiteboard animations — SVG stroke draw-on with a marker hand tracking the drawing tip, staggered reveals, wipe transitions, pacing synced to narration — delivered as one self-contained HTML file. Repository: https://github.com/iart-ai/explainer-video-skills/blob/main/skills/whiteboard-animation/SKILL.md 1. Fetch the SKILL.md file plus its helper files (scripts/verification scripts, references/recipes) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code; credentials only via the secure vault. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "whiteboard-animation". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. provide the script/voiceover text and any artwork to trace). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.