motionmaxxing skill
A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
- 1,123 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Runs Node.js and Python scripts, ffmpeg and headless Chrome, and writes film files to the film/ folder of your project
- Uses the network: captures a brand site's palette, fonts and screens and takes logos from SVGL and Simple Icons
- If `ELEVENLABS_API_KEY` is set, voice-over text and music requests go to ElevenLabs
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motionmaxxingDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs Node.js and Python scripts, ffmpeg and headless Chrome, and writes film files to the film/ folder of your project
- Uses the network: captures a brand site's palette, fonts and screens and takes logos from SVGL and Simple Icons
- If `ELEVENLABS_API_KEY` is set, voice-over text and music requests go to ElevenLabs
This is third-party code. Review the repository files before installing.
What it does
motionmaxxing is a skill that makes an agent produce motion graphics at a designer's level: launch films, product promos, brand stings, kinetic type and social ads. SKILL.md sets ten steps in a fixed order: tools and taste, getting to know the brand, one true thing and the page's purpose, finding the idea, world and time in a STORYBOARD.md file, script and voice, the hardest beat first, looking at the result, sound to picture, delivery. The agent shows the idea and storyboard before it builds. The film is built as an HTML page on its own `Motion` runtime on top of GSAP: 12 measured easing curves, words, typing, cursor, press, camera and a Three.js 3D hero. The `render.mjs` script renders the page frame by frame through Chrome and writes MP4 through ffmpeg, so every frame is reproducible from time. `brand.mjs` captures the palette, fonts and logo from a brand's site, and `fetch_logo.mjs` takes the official mark from SVGL, Simple Icons or the site itself and never redraws it. Six gates G0 to G5 check the result. Four are computed by the `look.py` and `lint.mjs` scripts: the film is not blank and moves, there is no run of more than three flat frames, the end hold is no longer than 1.4 seconds, and the page has no chrome such as corner labels, counters and timecodes. The agent judges G1 and G4 by eye on a contact sheet. The film/ folder ends up with final.mp4, index.html, STORYBOARD.md and NOTE.md, a report on what is real, what is generated and which numbers the gates showed.
Who it is for. For designers, marketers and founders who make promo films and stings with an agent and want a result without template slides and corner captions.
Good fit when
- You need a launch film or product promo from a site address, with a storyboard to approve
- You need a brand sting or a six-second film with kinetic typography
- You have a finished MP4 with its source index.html that you want rated as slop, mid or maxxed and fixed against the gates
- You need reproducible video from HTML where every frame is computed from time
- You need voice-over, sound effects and music through ElevenLabs
Not a fit when
- You need to edit shot footage on a timeline: the skill renders an HTML page to MP4 and has no video editor
- Node.js 22 or newer, Python 3, ffmpeg or Google Chrome is missing: install.sh reports what is absent and changes nothing
- You need rendering through something other than Chrome: only Chrome or Chromium over the DevTools protocol is supported
- You need a heavy 3D scene fast: WebGL renders at 7 to 11 frames per second at 1080p on an Apple GPU
Example request
/motionmaxxing make a 20-second launch film for our site, show me the idea and storyboard firstLimitations
- An early release: the author tested the skill on their own machine and a handful of real briefs, with no wide testing.
- The G5 lint reads the DOM, so text inside canvas, WebGL, images or video is invisible to it. Gates G1 and G4 have no script and are judged by eye.
- Voice, effects and music need the `ELEVENLABS_API_KEY` key, and without it the film has no sound. Music sometimes misses the tempo and length, and the normaliser can corrupt very short effects.
- GPU and software GL rendering give slightly different pictures, so do not mix them inside one film.
- The Apache-2.0 license covers the skill itself. The bundled GSAP is under the GreenSock Standard License, which is not an open-source license; Three.js, opentype.js and Inter keep their own licenses. Brands in the examples are shown with no affiliation to the companies.
How to disable. Delete the ~/.claude/skills/motionmaxxing folder: install.sh makes a symlink there by default, or a copy with the --copy flag. For another agent, remove the folder from its skills directory. Finished films sit in the film/ folder of your project and are deleted by hand. If you set ELEVENLABS_API_KEY, revoke the key in your ElevenLabs account.
FAQ
What does motionmaxxing produce?
The film/ folder ends up with final.mp4 (with sound if an ElevenLabs key is set), index.html with an editable source, STORYBOARD.md with the plan and NOTE.md with a report. STORYBOARD.md records the chosen idea, the world of each act and a beat table, and NOTE.md holds the G0 to G5 gate numbers and what the author suggests improving. The agent does not declare a film good.
What software do I need to make motion graphics with the skill?
Node.js 22 or newer, Python 3, ffmpeg and Google Chrome. An ElevenLabs key is needed only for voice, effects and music, and the Codex CLI with image generation is needed for surface plates. `bash scripts/providers.sh` prints JSON with what the machine has and installs nothing.
How do I make a promo film from a site address?
Call `/motionmaxxing` and give the address, for example asking for a 20-second launch film and to see the idea and storyboard first. The `brand.mjs` script captures the palette, fonts, logo and screens of the site, then the agent proposes an idea only this brand could film and a beat-by-beat storyboard.
What do gates G0 to G5 check and what does the agent do when one fails?
G0 checks that the render exists and moves, G2 looks for flat frames, G3 limits the end hold to 1.4 seconds, and G5 looks for page chrome. G1 and G4 are judged by eye. A failed gate gets fixed with no arguing, and the agent quotes the script numbers in NOTE.md.
Does the skill work outside Claude Code?
The skill is a folder with SKILL.md at its root. For any agent that reads SKILL.md, point it at the folder or copy it into the skills directory and give it shell access. The scripts need only node, python3 and ffmpeg on the path, and install.sh takes a --dir flag for another folder.
Discussion
No questions or reviews yet.
Related
SkillsA skill that makes your agent film a short product video: concept, edit, sound and render on Remotion or HyperFrames
A skill that turns an article, README or website into a vertical HyperFrames promo video: brief and approval first, then assets, build and review
Fifteen Claude Code skills for launch films, animated charts and reels made entirely from code, with no After Effects
A skill for Cursor, Claude Code and Codex: from a product name or URL it builds a 4K promo with music, voice-over and checks
A skill that builds a narrated paper-collage explainer video from a topic, a talking-head clip or a single photo
A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| motionmaxxing (this entry) | no | 1,123 | |
| Claude Motion Design | no | 725 | a Claude Code skill for motion films in pure code: HTML, Playwright and ffmpeg without After Effects or Remotion |
| HyperFrames | no | 75,530 | skills and a CLI from HeyGen: the agent writes HTML compositions and renders MP4, captions and motion graphics from them |
| Motion Design Skill | no | 2,601 | motion design principles for interfaces: timing, easing, choreography and Disney animation techniques |
README in short
The repository's front page opens with a banner and a rating scale of slop, mid and maxxed. Next come three before and after comparisons on other companies' brands, a breakdown of typical signs of a weak film and a description of the research: 53 frame-by-frame studied moments, about 150 rules and 12 measured easing curves. Then a ten-step protocol, a gate table, installation, request examples and a table of twelve scripts. The end holds a repository map, a section on ethics and the licenses of bundled components, and the early-release status.
README badge
Original SKILL.md
---
name: motionmaxxing
description: Direct and build professional motion-graphics films (launch videos, product promos, feature reveals, brand stings, kinetic-type pieces, social ads, CTAs) that read as made by a senior motion designer, not AI slop. Finds an idea only this brand could own (from its logo, control, material, verb, voice), builds a world for it (ground, light, depth, texture, 3D or generated image surfaces for the hero moment), then builds with a seek-safe GSAP runtime driven by curves measured frame by frame from 53 professional recreations, and reviews its own render honestly with scripted gates (look.py, lint.mjs) instead of self-certifying. Given a website URL it captures the brand (colours, fonts, official logo, copy, screenshots); with an ElevenLabs key it writes and voices the script, scores it, and cuts picture and sound together. Use for any request to make, plan, storyboard, fix or critique a motion graphic or promo video, in HyperFrames or plain HTML.
---
# motionmaxxing
*Early release: this skill is still getting better, and more is on the way. If something feels off, say so in your note.*
You are a motion director, designer and critic in one. Before you animate anything you decide **what idea only this brand could film**, **what world it happens in**, **what each beat makes the viewer believe**, and **how each shot becomes the next**. Then you build it with timing that comes from measurement, and you look at the render as a stranger would.
Evidence: ~4,300 measured moves from 53 frame-accurate pro moments (cited as M913-M974), 52 ranked human films, ~30 AI films judged blind, and this user's own verdicts (`taste/verdicts.md`, `taste/edits.md`). `SKILL` = the folder containing this file. Work in your own project folder, e.g. `film/`.
## What good is (judgment decides WHAT; the craft laws decide HOW)
1. **The idea belongs to the brand.** Found in its logo shape, core control, material, verb, voice, success moment; cover the logo and the film must stop working for a competitor.
2. **The viewer watches something happen.** The claim is performed, not captioned: one specific case, real content, proof first, nothing invented and shown as real.
3. **Every beat causes the next.** Objects become the next scene; the interface's own gestures are the joints; a hard cut means something.
4. **Emphasis is spent, not spread.** Big needs small around it; one lit thing per frame; at most a quarter of the beats are "the point"; endings usually get smaller.
5. **Time breathes.** Hold before what matters, give reading exactly its time, stop before the idea is spent, end once and quieter than you began.
6. **It sounds like the brand.** Real phrasing, a writer's voice, phrase-level sound with silence before the hit.
7. **One world.** One logic of light, material, lens and drawing, in the brand's grammar; a ground is a surface, not a swatch.
8. **Made with ambition.** The hero moment gets the hardest work (3D, a shader, a dense comp, a generated surface) and is worth a screenshot. A small UI on a black void is the minimalist default, not taste.
Read `references/judgment.md` before your first idea: each judgment with evidence, the default mind, and when "slop" things are right.
## Never ship (delete the element; do not justify it)
A film containing any of these is not finished. These are what this user rejected hardest.
1. **Page chrome / HUD:** a brand or film name in a corner, tracked-caps labels, counters ("02 / SPEAK", "01 - THE WAIT"), timecodes, BPM/FPS/resolution text, progress bars, corner brackets, scene labels over a shot.