motionmaxxing — скилл
Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами
- 1 123 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Запускает скрипты на Node.js и Python, ffmpeg и Chrome без окна и пишет файлы ролика в папку film/ вашего проекта
- Ходит в сеть: снимает с сайта бренда палитру, шрифты и экраны, берет логотипы из SVGL и Simple Icons
- Если в окружении есть `ELEVENLABS_API_KEY`, тексты озвучки и запросы на музыку уходят в ElevenLabs
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/motionmaxxingОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает скрипты на Node.js и Python, ffmpeg и Chrome без окна и пишет файлы ролика в папку film/ вашего проекта
- Ходит в сеть: снимает с сайта бренда палитру, шрифты и экраны, берет логотипы из SVGL и Simple Icons
- Если в окружении есть `ELEVENLABS_API_KEY`, тексты озвучки и запросы на музыку уходят в ElevenLabs
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
motionmaxxing — скилл, который заставляет агента делать моушен-графику на уровне дизайнера: ролики запуска, продуктовые промо, заставки бренда, кинетическую типографику и рекламу для соцсетей. SKILL.md задает десять шагов в фиксированном порядке: инструменты и вкус, знакомство с брендом, одна правда и назначение страницы, поиск идеи, мир и время в файле STORYBOARD.md, сценарий и голос, самый трудный кадр первым, просмотр результата, звук к картинке, выдача. Идею и раскадровку агент показывает до сборки. Ролик собирается как HTML-страница на собственной среде `Motion` поверх GSAP: 12 измеренных кривых плавности, слова, печать, курсор, нажатие, камера и трехмерный герой на Three.js. Скрипт `render.mjs` покадрово рендерит страницу через Chrome и пишет MP4 через ffmpeg, поэтому любой кадр воспроизводится по времени. `brand.mjs` снимает с сайта бренда палитру, шрифты и логотип, а `fetch_logo.mjs` берет официальный знак из SVGL, Simple Icons или с самого сайта и не перерисовывает его. Результат проверяют шесть гейтов G0–G5. Четыре считают скрипты `look.py` и `lint.mjs`: ролик не пустой и движется, нет пустых кадров дольше трех подряд, финальная пауза не длиннее 1,4 секунды, на странице нет служебных меток вроде угловых надписей, счетчиков и таймкодов. Гейты G1 и G4 агент оценивает на глаз по контактному листу. В папке film/ остаются final.mp4, index.html, STORYBOARD.md и NOTE.md с отчетом о том, что настоящее, что сгенерировано и какие числа показали гейты.
Для кого. Дизайнерам, маркетологам и основателям, которые делают промо-ролики и заставки с помощью агента и хотят получить результат без шаблонных слайдов с угловыми подписями.
Подходит, если
- Нужен ролик запуска или продуктовое промо по адресу сайта с раскадровкой на согласование
- Нужна заставка бренда или шестисекундный ролик с кинетической типографикой
- Есть готовый ролик в виде MP4 и исходной страницы index.html, который нужно оценить как слабый, средний или отточенный и поправить по гейтам
- Нужно воспроизводимое видео из HTML, где каждый кадр считается из времени
- Нужны озвучка, звуковые эффекты и музыка через ElevenLabs
Не подходит, если
- Нужен монтаж снятого видео на таймлайне: скилл рендерит HTML-страницу в MP4, редактора роликов в нем нет
- Не хватает Node.js 22 или новее, Python 3, ffmpeg или Google Chrome: install.sh сообщит о недостающем и ничего не изменит
- Нужен рендер не через Chrome: поддерживается только Chrome или Chromium через протокол DevTools
- Нужна тяжелая трехмерная сцена в реальном времени: WebGL рендерится 7–11 кадров в секунду при 1080p на GPU Apple
Пример запроса к агенту
/motionmaxxing сделай 20-секундный ролик запуска для нашего сайта, сначала покажи идею и раскадровкуОграничения
- Ранний релиз: автор проверил скилл на своей машине и на нескольких реальных заданиях, широкого тестирования не было.
- Линтер G5 читает DOM, поэтому текст внутри canvas, WebGL, картинок и видео для него невидим. Гейты G1 и G4 без скрипта и оцениваются на глаз.
- Голос, эффекты и музыка требуют ключ `ELEVENLABS_API_KEY`, без него ролик выходит без звука. Музыка иногда расходится с нужным темпом и длиной, нормализатор может испортить совсем короткие эффекты.
- Режимы рендера на GPU и программного GL дают немного разные картинки, поэтому их нельзя смешивать в одном ролике.
- Лицензия Apache-2.0 относится к самому скиллу. Встроенный GSAP идет по лицензии GreenSock Standard, которая закрытая для свободного использования, Three.js, opentype.js и Inter сохраняют свои лицензии. Бренды в примерах показаны без связи с компаниями.
Как отключить. Удалите папку ~/.claude/skills/motionmaxxing: install.sh по умолчанию делает в нее символьную ссылку, а с флагом --copy копию. Для другого агента уберите папку из его каталога скиллов. Готовые ролики лежат в папке film/ вашего проекта, их удаляют вручную. Если задавали ELEVENLABS_API_KEY, отзовите ключ в кабинете ElevenLabs.
Частые вопросы
Что получится на выходе у motionmaxxing?
В папке film/ остаются final.mp4 (со звуком, если задан ключ ElevenLabs), index.html с редактируемым исходником, STORYBOARD.md с планом и NOTE.md с отчетом. В STORYBOARD.md записаны выбранная идея, мир каждого акта и таблица кадров, а в NOTE.md числа гейтов G0–G5 и то, что автор советует доработать. Агент не объявляет ролик хорошим.
Какие программы нужны, чтобы сделать моушен-графику со скиллом?
Node.js 22 или новее, Python 3, ffmpeg и Google Chrome. Ключ ElevenLabs нужен только для голоса, эффектов и музыки, а Codex CLI с генерацией изображений нужен для поверхностей-подложек. Команда `bash scripts/providers.sh` выводит JSON с тем, что есть на машине, и ничего не устанавливает.
Как сделать промо-ролик по адресу сайта?
Вызовите `/motionmaxxing` и дайте адрес, например с просьбой сделать ролик запуска на 20 секунд и сначала показать идею и раскадровку. Скрипт `brand.mjs` снимет палитру, шрифты, логотип и экраны сайта, затем агент предложит идею, которую может снять только этот бренд, и раскадровку по кадрам.
Что проверяют гейты G0–G5 и что делает агент, если гейт не проходит?
G0 проверяет, что рендер существует и движется, G2 ищет пустые кадры, G3 ограничивает финальную паузу до 1,4 секунды, G5 ищет служебные метки на странице. G1 и G4 оценивают на глаз. Провалившийся гейт исправляют, спорить с ним нельзя, а в NOTE.md агент приводит числа из скриптов.
Работает ли скилл не только в Claude Code?
Скилл — папка с SKILL.md в корне. Любому агенту, который читает SKILL.md, достаточно указать эту папку или скопировать ее в каталог скиллов и дать доступ к оболочке. Скрипты требуют только node, python3 и ffmpeg в PATH, а install.sh принимает флаг --dir для другой папки.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл заставляет агента снять короткий фильм о продукте: идея, монтаж, звук и рендер на Remotion или HyperFrames
Скилл превращает статью, README или сайт в вертикальный промо-ролик на HyperFrames: сначала бриф и согласование, потом ресурсы, сборка и проверка
Пятнадцать скиллов для Claude Code: запуск продукта, анимированные графики и рилсы целиком из кода, без After Effects
Скилл для Cursor, Claude Code и Codex: по названию продукта или ссылке собирает 4K-ролик с музыкой, озвучкой и проверкой
Скилл собирает озвученный ролик в стиле бумажного коллажа из темы, видео с ведущим или одного фото
Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| motionmaxxing (эта запись) | нет | 1 123 | |
| Claude Motion Design | нет | 725 | скилл Claude Code для моушен-роликов чистым кодом: HTML, Playwright и ffmpeg без After Effects и Remotion |
| HyperFrames | нет | 75 530 | скиллы и CLI от HeyGen: агент пишет HTML-композиции и рендерит из них MP4, субтитры и моушн-графику |
| Motion Design Skill | нет | 2 601 | принципы motion-дизайна для интерфейса: тайминг, easing, хореография и приемы анимации Disney |
Коротко о README
Главная страница репозитория открывается баннером и шкалой оценки «слабый, средний, отточенный». Дальше три сравнения до и после на примерах чужих брендов, разбор типичных признаков слабого ролика и описание исследования: 53 покадрово разобранных эпизода, около 150 правил и 12 измеренных кривых плавности. Затем протокол из десяти шагов, таблица гейтов, установка, примеры запросов и таблица из двенадцати скриптов. В конце карта репозитория, раздел об этике и лицензиях встроенных компонентов, статус раннего релиза.
Бейдж для README
Исходный 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.