Motion Video Kit is a Claude Code skill for making short commercials that look like a SaaS launch film but sell a real business: a roofer, an estate agent, a shop, a B2B tool. The videos are built from code (HTML with GSAP animation, and Three.js where 3D explains something), plus AI-generated footage.
The value isn't a renderer. It's the taste and the process, written down: what 28 professional launch films do, and a review loop that stops an AI from grading its own work.
| Author | echris6 on GitHub |
| Released | 27th September 2026 |
| Popularity | About 420 GitHub stars in 3 days |
| Format | 1 skill folder, business-motion-film: Markdown references, Python and shell scripts, HTML templates |
| Renderer | Built for HeyGen's HyperFrames, but the rules and checks work with any renderer |
| Needs | ffmpeg and ffprobe for the scripts. Node 22+ and HyperFrames for the lab template |
| Licence | MIT |
What's inside
- The Gauntlet. The review loop: the builder never judges its own work. A fresh critic sees only the render, the brief and the references, lists problems, and a new critic then checks each fix item by item. Ready-to-use critic prompts included.
- Motion grammar. 6 rules, a catalogue of 16 reusable moves, and pacing numbers for a 30-second film.
- Notes on 28 launch films. Links to the originals, no footage.
- Quality bar. Measured checks (frozen frames, loudness, contrast, brand colour) plus the visual and business criteria clients enforce.
- Audio rules. Music that fits the buyer's customer, sparse sound effects, mix targets.
- Business playbook. Verticals, price anchors from public listings in September 2026, and a pilot-offer template.
- Three.js patterns. Scenes you can seek to any frame, exploded views with labels, and how to make a 3D product move like the real device.
- 2 worked examples. A calm service film, and a 40-second Three.js ad for a foldable phone where every frame is code.
The 6 motion rules
- The foreground becomes the transition. A headline or shape flies through the camera while the next scene is already underneath. No empty gap between scenes.
- 1 persistent actor. A cursor, card or photo keeps its identity across shots. Unrelated reveals in a row feel like a slideshow.
- Density comes from hierarchy. 1 main move, supporting movement on cards and labels, fine detail on top, all overlapping.
- Change speed. Slow into a landing so the viewer can read, then leave fast. Never drift at a constant rate.
- Hard cuts are allowed when subject, scale, direction and material match and the motion continues after the cut.
- Show the purpose as cause and effect. A scan produces findings, a button produces a state. Every action visibly produces a result.
For business people
What it does: gives an AI agent the playbook of a motion-design studio, so it can produce a 15 to 40-second commercial for a business and check it to a professional standard.
Why it matters: AI can already generate footage and animate text. What it lacks is judgement: pacing, when to cut, what makes a film look cheap. This kit writes that judgement down, and adds a critic that isn't the maker.
The rules I'd keep regardless of the tool:
- Truth first. Never invent testimonials, ratings, jobs or savings. A concept film says it's a concept: "Fictional brand · Concept film · AI-generated imagery".
- It must work on mute. By the end, a first-time viewer with the sound off can say what the business does and what to do next.
- "No bugs" isn't "good". A clean, smooth film still gets rejected if it's basic or slow.
The limits: it's a playbook, not a product. You need Claude Code, a renderer, AI image and video generation, and time: the worked examples took dozens of critique rounds. The price anchors are a September 2026 snapshot and need checking before you quote them.
For technical people
Install it as a global or per-project skill:
git clone https://github.com/echris6/motion-video-kit.git
cp -r motion-video-kit/business-motion-film ~/.claude/skills/
Then ask Claude Code for a business commercial, a sample reel, an explainer, or a review of an existing one, and the skill loads. For another LLM, paste SKILL.md and the reference files the current step needs.
- Workflow: brief → reference moments → storyboard → assets → components built in isolation → assembly → full-film Gauntlet → audio → delivery with a contact sheet and a ledger of what each critic found and what changed.
- Deterministic motion: every animated state is a function of timeline time. No free-running
requestAnimationFrame, noDate.now(), no unseeded randomness. Seek any frame, get the same pixels. That's what makes frame-exact rendering and review possible. - Hand-offs at exact pixels: the last frame of scene A equals the first frame of scene B for any object carried across.
- Storyboard numbers: 12 to 15 compositions in 30 seconds, the lead subject filling 60 to 85% of the frame, no hold without motion longer than about 0.6 seconds.
- AI footage: generate the key still first, then animate it in 4 to 5-second clips with small camera moves. Regenerate clips whose geometry warps, don't hide them.
- Scripts: frozen-frame detection, loudness measurement, contact sheets, sound-effect softening and gain solving, and an offline mix.
Value
I make a lot of video: avatar demos for clients, my own video twin, product walkthroughs. What's missing from most of it isn't tools, it's the motion judgement this kit writes down. The 6 rules and the "works on mute" test apply to any demo video I send a prospect.
The Gauntlet is the part I'd reuse beyond video. It's the same principle as my council (see The Council ): the maker never grades its own work, and a fresh reviewer checks every fix. For HyperFrames itself, see HyperFrames and HyperFrames Launch Video .
Further Reading