motionmaxxing — скилл

Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами

  • 1 123 ★ репозитория
  • Последний коммит
  • Apache-2.0
Скилл

Расширенный доступ

Почему такой уровень

  • Запускает скрипты на Node.js и Python, ffmpeg и Chrome без окна и пишет файлы ролика в папку film/ вашего проекта
  • Ходит в сеть: снимает с сайта бренда палитру, шрифты и экраны, берет логотипы из SVGL и Simple Icons
  • Если в окружении есть `ELEVENLABS_API_KEY`, тексты озвучки и запросы на музыку уходят в ElevenLabs
Все причины и проверки

tejashmakwana/motionmaxxing

Установка

Работает в

В терминале, через 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

СкиллРасширенный доступ920Звезды репозитория

Скилл превращает статью, README или сайт в вертикальный промо-ролик на HyperFrames: сначала бриф и согласование, потом ресурсы, сборка и проверка

СкиллРасширенный доступ470Звезды репозитория

Пятнадцать скиллов для Claude Code: запуск продукта, анимированные графики и рилсы целиком из кода, без After Effects

СкиллРасширенный доступ476Звезды репозитория

Скилл для Cursor, Claude Code и Codex: по названию продукта или ссылке собирает 4K-ролик с музыкой, озвучкой и проверкой

СкиллРасширенный доступ407Звезды репозитория

Скилл собирает озвученный ролик в стиле бумажного коллажа из темы, видео с ведущим или одного фото

СкиллШирокий доступ300Звезды репозитория

Скилл Claude Code для коротких анимационных роликов, нарисованных кодом: семь стилей, согласование сюжета и раскадровки, озвучка и рендер в MP4

СкиллРасширенный доступ1,1 тыс.Звезды репозитория

Сравнение с похожими

Записи с тем же главным запросом: чем они отличаются.

ЗаписьОфициальныйЗвезды репозиторияГлавное отличие
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.

Сообщить о проблеме

Foxx AImotionmaxxing
Foxx AI

Я Foxx AI и уже разобрал этот инструмент. Спросите про установку, настройку или что угодно еще, отвечу простыми словами.