motion2code: копия ролика кодом, проверенная по кадрам

motion2code выложил Lovis Odin 20 октября 2026 года. Это навык (skill) для агентов, которые пишут код: Claude Code, Codex, Cursor, Copilot, Gemini и других. Он учит агента пересобирать моушн-ролик в чистый код: фигуры SVG прямо в странице, одна таймлиния GSAP управляет всем, любой момент можно поставить по времени, ролик повторяется без шва и проверен рядом с исходником.

Для записей сайтов и приложений навык идёт дальше: собирает настоящую страницу с прокруткой на GSAP ScrollTrigger, кнопками и клавиатурой.

Автор начинает с проблемы: агенты анимируют вслепую, видео они посмотреть не могут. Попросишь «повтори этот клип» - агент напишет то, что представил:

1. Не тот момент. Удар приходится не на ту секунду.
2. Не то движение. Плавное там, где в исходнике рывок с перелётом.
3. Цвета по памяти и слова с теми же ошибками, что у видеомодели.
4. Скачок на повторе. Конец не сходится с началом.
5. Подлог. Некоторые агенты тихо вставляют само видео в страницу или обводят его кадры вместо того, чтобы пересобрать.

1. Изучает исходник. study_video.py сохраняет кадр каждые 0,25 с, кадры до и после каждой резкой смены, общий лист кадров, точную палитру плоских цветов и оценку, повторяется ли ролик сам. Агент сначала смотрит лист, потом кадры по порядку.
2. Пишет раскадровку. По строке на каждый момент: отрезок времени, что делает каждая фигура, как замедляется, во что превращается дальше.
3. Строит сцену из шаблона: один SVG в размере исходника, цвета - из снятой палитры, шрифт - ближайший из Google Fonts.
4. Анимирует на одной таймлинии GSAP. Страница отдаёт window.anim.seek(t): любой момент можно отрисовать, сравнить и проверить одинаково при каждом запуске.
5. Замыкает повтор кодом. Последний момент возвращается точно в первый кадр, даже если исходник так не делает.
6. Проверяет и правит. frame_diff.py ставит исходник и код рядом в нужные секунды, считает оценку расхождения и называет пять худших моментов. Агент правит худшие первыми, потом проходит переходы покадрово. check_anim.py --runtime проверяет шов повтора, ошибки в консоли и сеть.
7. Отдаёт результат: index.html, compare.html (исходник и код рядом, синхронно) и по просьбе видео-доказательства.
8. По желанию - настоящий сайт site.html из записи интерфейса: прокрутка становится ScrollTrigger, нарисованные клики - настоящими кнопками.

Оценка из frame_diff.py, по словам автора, нужна, чтобы ранжировать моменты, а не как приговор: агент обязан открыть картинки и посмотреть сам. Ориентир из навыка: до 10 на стоп-кадрах, 10-30 на быстром движении, выше 40 - не та фигура, цвет или момент.

Шесть примеров лежат в репозитории, у каждого есть index.html (код), compare.html и исходник в 480p. Ещё больше роликов - в живой галерее.

Почему вес важен: исходник - видео, а копия - векторы. Её можно отрисовать в 4K и больше без потери резкости, перекрасить, сдвинуть по времени или поменять слово прямо в тексте файла.

Claude Code - через магазин плагинов, две команды по очереди:

claude plugin marketplace add lovisdotio/motion2code

claude plugin install motion2code@motion2code

Или скопировать папку skills/motion2code в ~/.claude/skills/.

Codex, Cursor, Gemini CLI, Copilot и ещё около 70 агентов - одной командой через пакет skills:

npx skills add lovisdotio/motion2code

Для claude.ai автор предлагает упаковать папку навыка в zip и загрузить её в настройках, раздел Capabilities, Skills. Для ChatGPT и Gemini Gems в репозитории есть папка adapters/ с готовыми промптами.

Что нужно на компьютере: Python 3.9 или новее, ffmpeg и Playwright для скриптов, которые открывают браузер.

У автора есть заготовка полного задания. Мы перевели её: заполни строки в угловых скобках и отдай агенту целиком.

Возьми навык motion2code (сначала прочитай его SKILL.md и иди по его порядку работы) и пересобери ролик ниже
в один самостоятельный index.html: SVG прямо в странице, одна таймлиния GSAP, контракт window.anim, бесшовный повтор.

Исходный ролик: <путь к файлу>
Промпт, по которому ролик сгенерирован (точные слова): <путь к .txt, вставь текст или оставь пустым>
Папка для результата: <папка> (файлы index.html, compare.html, при необходимости site.html)
Обязательно сохранить: <моменты, персонажей или слова, которые важнее всего, или пусто>
Это запись интерфейса? <да: собери ещё site.html с настоящей прокруткой и кликами / нет>
Нужны видео-доказательства? <да: anim.mp4 и side_by_side.mp4 / нет>

Ролик - это техническое задание. Всё бери из его кадров.

Готово значит:
- study_video.py запущен, лист кадров и кадры просмотрены до первой строки кода;
- index.html соблюдает контракт страницы (seek, ?t=, ?external=1, data-ready, автозапуск и повтор);
- использован только исходный ролик: ничего не сгенерировано заново, не встроено и не обведено по кадрам;
- каждое читаемое слово - слово из промпта, без ошибок;
- frame_diff.py прогнан каждые 0,5 с и покадрово на каждом переходе; худшие моменты исправлены или объяснены;
- check_anim.py index.html --runtime выдаёт [ok] (шов, детерминизм, консоль, сеть);
- в отчёте перечислено, чем копия отличается от исходника, с цифрами.

Для быстрого старта хватит и одной фразы:

Короткая просьба.

Пересобери clip.mp4 как анимацию SVG + GSAP, которая повторяется без шва. Используй навык motion2code.

Запись сайта.

Преврати эту запись экрана приложения в настоящий сайт. Используй навык motion2code.

1. Скачай репозиторий с GitHub (кнопка Code, Download ZIP) и распакуй.
2. Запусти простой сервер в папке репозитория, команда из README:

   команда для терминала

   python3 -m http.server -d gallery/eye

   Скопировать
3. Открой http://127.0.0.1:8000/compare.html. Слева исходник, справа код, они идут синхронно. Стрелки шагают на кадр, пробел - пауза, кнопка Onion skin кладёт код поверх видео наполовину прозрачным, чтобы видеть расхождение.

1. Только плоская графика. По описанию навыка он не для съёмки, 3D-рендера и монтажа видео.
2. Нужен готовый ролик. Навык повторяет то, что есть, и запрещает агенту генерировать исходник заново или «искать версию получше».
3. Не копия пиксель в пиксель. Автор просит агента честно перечислять, чем код отличается от исходника. На нашем наезде это видно: края у копии чуть сдвинуты.
4. Нужны Python, ffmpeg и Playwright. Без них скрипты, которые режут ролик и сверяют копию, не запустятся.
5. Очень свежий. Выложен 20 октября, версия плагина 1.0.0.
6. Лицензия. Код - MIT. Исходные ролики галереи сгенерированы MiniMax H3 Max на fal и лежат в 480p только для сравнения.
7. Мы сами его не запускали. Всё выше - по README, файлам навыка и галерее на 21.10.2026.

Первоисточник: репозиторий motion2code на GitHub, примеры вживую - fal-motion-in-code.vercel.app.