Tutorialthe whole build, step by step

Make animated explainer Shorts with Claude Code and HyperFrames (free skill)

Install my open-source shorts-motion skill, make your first animated 9:16 Short from a script, and let its critic fail the cut before you post it.

By Eric Snyder, founder 5 min readChecked on Oct 14, 2026
Save this guidereceiptsgroup.com/guides/shorts-motion
SetupOne git clone into your Claude Code skills folder, then a 30-second demo to check it works
CostFree and open source (MIT). Claude Code itself needs a paid Claude plan
You needA Mac, Python 3.9+, ffmpeg and Node 22+. Your own voice recording or the Mac's built-in voice
What it makesVertical 1080x1920 explainer Shorts with captions, graphics timed to the words, and an optional presenter
What it can't doMake the presenter for you: bring your own talking-head take. Only tested on macOS
In this guide
Start here
  1. Start here: paste this into Claude Code
The manual way
  1. How the pieces connect
  2. Install it
  3. Make your first Short
  4. What the critic fails a cut for
Also worth a look
  1. Try huashu-art-motion too
  2. Mistakes to avoid
  3. Sources, checked Oct 14, 2026

This is the stack from my video: the same script made twice, once with the viral huashu-art-motion skill and once with mine. Mine is a Claude Code skill called shorts-motion. You give it a script, Claude writes the scenes (big type, slides, steps, stats, a before and after), it renders a 1080x1920 Short with HyperFrames, and then a critic measures the video and fails it for the stuff that makes Shorts look cheap: empty space, tiny text, a face that's too small, captions crashing into graphics, the same layout twice, and the slow zoom that makes everything feel like a slideshow. Claude fixes it and goes again until it passes.

It's free and open source. Everything runs on your own Mac, no API keys. Here's the setup, a prompt to paste, and the honest limits.

Checked on Oct 14, 2026

Start herepart 1

Start here: paste this into Claude Code

Install Claude Code first if you don't have it (step 1 below). Then run these lines in your terminal: they install the skill and run the demo, so you know it works before you make your own.

bashInstall the skill and run the demo
git clone https://github.com/ericsnyder2025/shorts-motion ~/.claude/skills/shorts-motion
pip3 install numpy Pillow opencv-python-headless
~/.claude/skills/shorts-motion/scripts/demo.sh ~/shorts-motion-demo
open ~/shorts-motion-demo/demo.mp4

Then start Claude Code in a new folder and paste this prompt with your own script in it.

Copy this into Claude Code
Use the shorts-motion skill to make a 30-45 second vertical Short from the script below. Use the Mac voice for the narration. Pick a layout for each beat that shows what's being said, not one that decorates it. Build it, render it, run the critic, and keep fixing scenes.json until the critic passes with no warnings. Then show me the critic sheet.

Script:
[paste your script here]
The manual wayparts 2 to 5

How the pieces connect

  1. 1
    Your scriptscript.txt, or a recording of your voice→ the words and when each one is said
  2. 2
    The scenesClaude writes scenes.json: which layout shows each beat, and the spoken words that start it→ a plan you can read and edit
  3. 3
    The renderbuild.py turns it into a HyperFrames project and renders it→ a 1080x1920 MP4 with captions
  4. 4
    The criticcritic.py measures the MP4: space, text size, faces, captions, repeats, motion→ PASS, or the exact things to fix

Install it

  1. Install Claude Code (skip if you have it)

    Skip this if claude --version already prints a version. You need a paid Claude plan. The first time you run claude, it sends you to your browser to log in.

    bashInstall (Mac)
    curl -fsSL https://claude.ai/install.sh | bash
    # open a NEW terminal window, then:
    claude --version
  2. Install what it runs on

    Python packages for the critic and the motion check, plus ffmpeg and Node (HyperFrames renders the video in its own headless Chrome, fetched the first time you build).

    bashRequirements (Mac with Homebrew)
    brew install ffmpeg node
    pip3 install numpy Pillow opencv-python-headless
  3. Put the skill where Claude Code finds it

    Claude Code picks up any skill in ~/.claude/skills. Once it's there, just ask for a Short and it uses it.

    bashClone it
    git clone https://github.com/ericsnyder2025/shorts-motion ~/.claude/skills/shorts-motion
  4. Run the demo

    It voices a short example script with the Mac voice, builds an 18-second Short (big type, slides, steps, a stat, a before and after) and runs the critic. About 30 seconds. If it ends with RESULT PASS, you're set.

    bashDemo
    ~/.claude/skills/shorts-motion/scripts/demo.sh ~/shorts-motion-demo

Make your first Short

  1. Write the script out loud

    Write it the way you'd say it, not the way you'd type it. 80-150 words is a 25-45 second Short. Save it as script.txt.

  2. Get the voice and the word timings

    Every graphic lands on its spoken word, so the skill needs to know when each word is said. The Mac voice gives exact timings. For your own recording, install a local Whisper and use transcribe instead.

    bashMac voice, or your own recording
    python3 ~/.claude/skills/shorts-motion/scripts/words.py say script.txt --out voice.wav --words words.json
    # or, for your own voice:
    python3 ~/.claude/skills/shorts-motion/scripts/words.py transcribe voice.wav --words words.json
  3. Let Claude write the scenes

    Ask Claude Code to write scenes.json with the skill. One idea per scene, 1.5 to 5 seconds each. The layouts: big kinetic type, slides (pages), numbered steps, a stat, a flow, a checklist, a before and after, a quote, a phone screen. Add your own talking-head take as the presenter if you have one.

  4. Build, render, critique, repeat

    Claude builds and renders it, runs the critic and fixes what it flags. You open the critic sheet and look at it yourself: the numbers catch the hygiene, your eye catches whether the graphic actually shows what you're saying.

    bashWhat Claude runs
    python3 ~/.claude/skills/shorts-motion/scripts/build.py scenes.json --out project --render short.mp4
    python3 ~/.claude/skills/shorts-motion/scripts/critic.py short.mp4 --plan project/scene-plan.json --out critic

What the critic fails a cut for

  • Empty space: a dead region over about a fifth of the frame.
  • Small text: any line under 40 px tall on a 1080x1920 frame.
  • Walls of text and captions crashing into graphics.
  • A tiny head when a presenter is on screen.
  • The same layout twice in a row, or too few different layouts.
  • Stale stretches: too long with nothing changing on screen.
  • Blank frames in the middle of the video.
  • It also warns on slow uniform zoom, too many push-ins and flat dead background. That's the slideshow feel. It's measured with the gate from huashu-art-motion, calibrated on our own posted videos and viral Shorts in our niches.
Also worth a lookparts 6 to 7

Try huashu-art-motion too

The skill from the first half of my video is huashu-art-motion by alchaincyf: open source (MIT), 36 art styles and 9 explainer formats, with almost 4,000 GitHub stars in its first eight days (as of Oct 14). Its kinetic type is really good, and its quality gate is the part I borrowed: shorts-motion vendors it, with credit, to catch slow zoom. Its docs are mostly in Chinese, and its best-looking Kurzgesagt-style shots come from custom scene code, not the one-prompt clips.

bashInstall it
npx skills add alchaincyf/huashu-art-motion

Mistakes to avoid

  • Fixing the HTML instead of the spec. Edit scenes.json and rebuild; the generated page gets overwritten.
  • Silencing the critic. An allow skips a rule for one scene and needs a reason. Use it for the rare real exception, not to get a green light.
  • Zooming everything. Hold still while a graphic builds and move on the reveal. A slow push on every scene is exactly what reads as a slideshow.
  • Numbers you can't back up. Put a number on screen only if it's real, and label anything made up as an illustration.

That's the setup

Same script, a critic that won't let the slideshow through, and the whole thing runs on your Mac. Clone it, run the demo, then make one from your own script.

Checked on Oct 14, 2026 against

Every claim about a third-party tool in this guide (plans, prices, menu paths, commands, limits) was checked against these official pages on Oct 14, 2026. These screens change often: if something looks different, trust the page over this guide.

  • shorts-motionThe skill: SKILL.md, the layouts, the critic, the motion check, the demo (MIT).
  • huashu-art-motionThe animation skill compared in the video; source of the vendored gate (MIT). Stars as of 2026-10-14: 3,949.
  • HyperFramesHeyGen's open-source HTML-to-video renderer that shorts-motion builds on (Apache-2.0).
  • Claude Code: skillsWhere Claude Code looks for skills and how it picks one up.
Rather skip the setup?

Want help setting this up?

Receipts Group builds these systems. Thirty minutes with Eric tells you which piece is worth building first, or that none of them are. The guides stay free either way.

Keep going

more free guides