Моушен-дизайн нейросетью: что это, как сделать и признаки ИИ-графики

Материал для этого гайда взялся не из обзоров. 17 октября 2026 года мы сняли и разобрали 253 записи галереи prompt-motion.com: это видео, сделанные агентами по текстовым заданиям, с полным промптом, моделью и стеком к каждому. Готовых объектов там нет, ценность в формулировках: у лучших по оценкам роликов задания устроены одинаково, запреты совпадают у разных авторов, и из них складывается метод. Всё, что ниже, с этого дня применяется к каждой нашей вставке по умолчанию.

Порядок: как вообще нейросеть делает моушен, главный закон рендера, банлист с частотами, правило движения, пять строк задания, бит-карта, рабочие приёмы, грабли, шаблон задания целиком, проверка. Если нужен сам движок, установка и подключение к агенту, это в гайде про Hyperframes, здесь метод.

Часть 1 · Ответ

Что такое моушен-дизайн нейросетью, если коротко

Это другая работа, чем «сгенерируй ролик по описанию». Видеомодель рисует кадры и не даёт контроля над секундой 2,4. Код даёт полный контроль и воспроизводимость: исправил строку, перерендерил за секунды, кадр ровно тот же. Про генерацию видео отдельный гайд про нейросети для видео.

Часть 2 · Устройство

Как нейросеть делает моушен: страница, кадр, видео

1. Задание. Текст: концепт, холст и палитра, запреты, бит-карта под речь, способ проверки. Шаблон в конце гайда.
2. Агент пишет сцену. HTML с разметкой элементов, стили, скрипт с таймлайном, где у каждого движения абсолютное время старта и длительность. В нашем случае это Hyperframes и таймлайн GSAP.
3. Проверка кадрами до рендера. Инструмент снимает кадр композиции на заданной секунде без рендера. Снимаются кадры на каждом времени бит-карты.
4. Рендер. Браузер без окна перематывает сцену на каждый кадр, снимает его, ffmpeg склеивает. Полный кадр в mp4, накладка поверх лица в mov с прозрачностью.
5. Раскладка на ролик. Готовая вставка кладётся на речь по своей фразе, разбор в гайде про вставки в видео.

node .agents/tools/shot.mjs <композиция> 12.4,12.95,13.7,14.6,15.1
npx --yes hyperframes@0.7.6 render -o ../renders/b3.mp4 --quality high

Часть 3 · Закон

Закон: кадр есть функция времени

Одна и та же мысль стоит в восьми промптах разных авторов галереи, и она объясняет большинство сломанных рендеров. Формулировка: всё состояние кадра вычисляется из времени; никаких переходов в стилях, таймеров и состояния, перенесённого с прошлого кадра; пружины замкнутой формулой; случайных чисел нет, иначе кадр не воспроизводится.

• Почему. Движок рендерит перемоткой: кадр 2,4 секунды может сниматься раньше кадра 1,0. Если положение элемента зависит от того, что было «до», рендер расходится с предпросмотром.
• Что это запрещает в коде. CSS transition и animation, setInterval и requestAnimationFrame, Math.random, в том числе случайный порядок лесенки, бесконечные повторы, колбэки вроде onUpdate и call. Линт нашей версии движка часть этого ловит сам.
• Как тогда делать счётчик или набор строки. Состоянием: несколько элементов, у каждого своё время появления. Каждая буква это свой элемент с заданной секундой; интервалы из явного массива 0,06-0,19 секунды, пробелы и знаки длиннее.
• Стартовые состояния до первого кадра. Все исходные положения выставляются до нуля таймлайна, конец блока это скрытие, иначе при перемотке назад элемент воскресает.
• Пружины. Любая кривая замедления это замкнутая функция, физика со скоростью и накоплением запрещена. Связанные величины едут одной функцией: точка на линии и сама линия с одной длительностью и одной кривой, иначе точка отстаёт от кончика.

Часть 4 · Банлист

Одиннадцать признаков ИИ-графики с частотами

Списков запретов в галерее 16 из 230 промптов от 12 авторов, но среди них четыре из двадцати самых оценённых записей. Частоты ниже это число промптов и число авторов, у которых запрет встречается.

• «Похоже на шаблон» это не эффект, а планка приёмки. Перед сдачей к каждому кадру вопрос: это могло быть собрано из стокового шаблона? Если да, кадр переделывается, даже если ни один пункт списка не нарушен. Список сообщает агенту стандарт, и приёмы вне списка получают ту же проверку.
• Мёртвое время. Внутри пятисекундной вставки нет отрезка длиннее секунды без изменений. Холд разрешён там, где зритель читает результат, но это пауза перед следующим событием, а не хвост.
• Точки в экранном тексте не ставятся. Вывод, подпись, кикер заканчиваются без точки; многострочный вывод делится переносом.
• Свист. Из галереи не следует и галереей не отменяется: там его ставят. Наш запрет старше и остаётся. Про звук в гайде про звуки для монтажа.

Часть 5 · Главное правило

Движение исходит из элемента, который уже в кадре

Блог галереи называет это правило лучше любого списка: запрещено движение, не связанное с элементом, который уже на экране. Если вспышка не выходит из чего-то и не приходит куда-то, это наполнитель.

• Смена состояния идёт через элемент. Кнопка заливает кадр и сжимается в карточку; точка доезжает до узла, и узел загорается; таблетка меняет ширину и содержимое; линия прочерчивается, и на её конце встаёт значение.
• Элемент приходит от чего-то. Строка поднимается из линии-маски, чип выезжает из-под карточки, кольцо расходится от точки. «Прилетел из ниоткуда» допустим только для входа блока целиком и его ухода.
• Передача слова. Если подпись кнопки становится заголовком, это один элемент, который едет, а не два, из которых один гаснет.
• Один связующий элемент на вставку. В задании назван элемент, который стоит на экране от первого кадра до последнего: точка маршрута, таблетка состояния, заливка от кнопки, курсор. Нет ответа, вставка не придумана.
• Критерий из галереи: зритель должен подумать «ну конечно, следующая сцена вышла из этого». Переходы подробно в гайде про переходы в видео.

Часть 6 · Задание

Пять строк задания: холст, акцент, шрифты, связь, идея

Сильные промпты галереи устроены одинаково: один концепт, список запретов, тайминг по биту, способ сборки, шаг проверки. Сборка и проверка у нас зашиты в инструменты, поэтому в задание каждой вставки идут пять строк.

1. Холст. Один на всю серию, словами, не меняется между вставками. У нас бумага, чернила, глина.
2. Палитра и акцент. Не больше трёх цветов плюс чёрный и белый. Один акцент, и перечислены два-три места, где он стоит. Красный и зелёный только как состояние, на элементе состояния.
3. Типографика. Один шрифт на заголовки, один на интерфейс и подписи, моноширинный на значения и команды. Четвёртого нет. Слова по одному анимируются только при наборе строки и в хук-титуле; обычная фраза входит целиком.
4. Чем связаны сцены. Элемент, который переживает все состояния вставки.
5. Одна идея на кадр. Вставка стоит пять секунд и несёт одну мысль из речи; вторая мысль это вторая вставка.

Часть 7 · Время

Бит-карта вместо таймкода

В галерее структура ролика описана не «сцена 1: 0-3 секунды», а сеткой событий, где каждому назначен бит: «120 ударов в минуту, семь тактов, на каждом ударе что-то происходит». У нас музыки во вставках нет, но бит есть: речь. Промпт для разговорных роликов из той же галереи говорит прямо: не насаживать речь на танцевальный бит, вести по фразам, паузам и ударениям, оставить хотя бы один момент полной неподвижности в 400 миллисекунд.

• План вставки это таблица «слово, событие». Время из пословной расшифровки. Вставка стартует через 0,1-0,3 секунды после первого слова фразы, цифра встаёт на слове-цифре, узел на названии шага, «готово» на слове «готово».
• Событие на каждом ударном слове. В пятисекундной фразе их четыре-семь. Если на слове менять нечего, вставка стоит не на своей фразе.
• Приходы разнесены. Элементы одного события стартуют в пределах 0,15 секунды, но не в один кадр: лесенка 0,06-0,08. Два события никогда не стартуют одновременно.
• Одна точка покоя 0,4-0,6 секунды на слове, которое надо услышать.
• Темп речи задаёт темп вставки. Фраза за три секунды значит вставка короче пяти. Потолок остаётся потолком, не целью.

Часть 8 · Приёмы

Девять приёмов, которые работают

1. Точка маршрута. Едет по линии от узла к узлу, узлы загораются на словах. Линия и точка одной функцией.
2. Таблетка состояния. Один элемент меняет ширину и текст: думает, делает, готово. Три разных старта у уходящей подписи, контейнера и входящей подписи.
3. Заливка от кнопки. 0,3-0,35 секунды до углов плюс 120 пикселей, подмена сцены под сплошной, сжатие обратно 0,5 секунды.
4. Набор строки. Каждая буква свой элемент, интервалы из массива, строка одна, не длиннее 24 символов, каретка мигает только во время набора, на Enter поле даёт микро-сжатие 0,985, ответ через 0,15 секунды.
5. Курсор. Подвод 0,45-0,7 секунды, пауза перед кликом 0,12-0,2, клик как сжатие элемента 1 → 0,96 → 1, реакция интерфейса через 0,1-0,15. Одна-две вставки с курсором на ролик.
6. Счётчик. 0,4-0,7 секунды, заканчивается ровно на значении к концу звучания цифры. Собирается состоянием, не колбэком.
7. Шкала с порогом. Полоса прочерчивается, указатель едет той же функцией, порог стоит заранее.
8. Было и стало. Два состояния, стрелка, вердикт. Полнокадровый вариант через заливку, не через кроссфейд.
9. Текст с подсветкой слов. Фраза входит целиком, выбранные слова подсвечиваются на своих секундах.

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

Часть 9 · Грабли

Десять граблей рендера в браузере

1. Точка и линия едут разными кривыми. Точка отстаёт или обгоняет кончик. Одна длительность, одна кривая.
2. Подписи накладываются при смене состояния. Три старта с шагом 0,1 и 0,15 секунды.
3. Заливка мигает. За один кадр меняется половина экрана. 0,3 секунды и бокс за углы.
4. Набранная строка переносится, поле прыгает. Одна строка, не длиннее 24 символов.
5. Первый кадр снят системным шрифтом. Шрифты блокирующей загрузкой, кадры снимаются после готовности шрифтов.
6. Белая плашка тонет на светлом фоне. Контур в один пиксель всегда.
7. Элемент воскресает при перемотке назад. Скрытие ставится на корень блока, детям видимость руками не задаётся.
8. Длинный текст не влезает туда, где влезал короткий. При замене текста проверяется кадр, а не разметка.
9. Хвост стоит без движения две секунды. Либо вставка короче, либо событие на последнем слове.
10. Второй акцентный цвет пролез «для красоты». Список мест акцента из задания.

Отдельно про размытие движения: на нашей версии движка 0.7.6 субкадровый блюр невозможен, часы композиции прибиты к 30 кадрам, и рендер на 120 кадров даёт четыре одинаковых кадра подряд. На версии 0.7.42 работает рендер на 240 кадров со смешиванием восьми субкадров в ffmpeg; четыре субкадра дают призрачные копии, восемь ровный след. Рендер пятисекундной вставки при этом занял 31 секунду против 13. Мы проверили это 17 октября 2026 года на одной точке, едущей 200 пикселей за полсекунды, и пока оставили блюр выключенным: быстрые движения просто делаются чуть медленнее.

Часть 10 · Шаблон

Шаблон задания для агента

Задание под одну вставку целиком. Копируется в план, заполняется под свою фразу и отдаётся агенту вместе с файлом пословной расшифровки.

Концепт: одна идея на вставку: «агент читает код, зовёт инструмент и приносит результат».
Холст: бумага #F0EEE6, чернила #191919, акцент глина #CC785C. Общий на всю серию.
Акцент глиной только в трёх местах: точка маршрута, активный узел, вывод.
Шрифты: Source Serif заголовок, Manrope подписи, JetBrains Mono значения. Четвёртого нет.
Связывает сцены: точка маршрута, на экране от первого кадра до последнего.
Не делаем: свечение, частицы, кроссфейд, холд дольше 1 с, текст и рамки по углам,
градиенты на UI, пружину сильнее back.out(1.2), точки в экранном тексте, шаблонный вид.
Кадр есть функция времени: только твины на таймлайне, без CSS transition/animation,
таймеров, Math.random, бесконечных repeat; все from-состояния через set до первого кадра.
Бит-карта (из word_timing.json):
12.40 «агент»    блок входит, маршрут бледный
12.95 «читает»   точка доезжает до узла 2, узел загорается
13.70 «зовёт»    точка доезжает до узла 3
14.60 «приносит» точка доезжает до узла 4, впитывается
14.60-15.10      покой, вывод стоит
15.30            блок уходит
Цифры и цитаты только из расшифровки, ничего не выдумывать.
Проверка: кадр на каждом времени бит-карты до рендера; после рендера скан хлопков.

• Цифры и цитаты только настоящие. Промпты галереи повторяют это буквально: никаких выдуманных процентов, множителей, имён клиентов; цитату из речи на экране воспроизводить дословно. У нас это правило постоянное, и цифры на экране проверяются.
• Агент сначала показывает кадры, потом рендерит. Концепт, одобренный словами, не равен одобренному визуалу: темп, характер движения и ракурс описываются до рендера.
• Как отдать это агенту в терминале и где хранить правила на все вставки сразу, в гайдах про системный промпт и про CLAUDE.md.

Часть 11 · Проверка

Проверка: кадр на каждый бит и скан хлопков

• До рендера. Кадр на каждом времени из бит-карты, плюс конец каждого входа через 0,05 и 0,1 секунды для проверки перелёта, плюс кадр на 70 процентах длительности. Не три кадра для галочки, а по кадру на событие. И смотреть глазами, а не подтверждать, что рендер завершился.
• После рендера. Скан хлопков: разница соседних кадров, скачок втрое больше соседей это элемент, вставший без движения, или подмена сцены вне заливки. Разрешённые скачки: первый кадр блока и кадр под сплошной заливкой.
• Читаемость на телефоне. Кадр уменьшается до ширины 390 пикселей. Кегль до 36 пикселей в кадре 1080 на 1920: белый не ниже 0,78 непрозрачности, контраст к фактическому фону под строкой не ниже 4,5 к 1, вес шрифта от 500. Если щуритесь, поднимать контраст, кегль или вес.
• Чек-лист перед сдачей. Тире и точки на экране, звук во вставках, прозрачность и нижняя граница накладок, чёрные полосы по краям полного кадра, пустая нижняя треть, битрейт.

ffmpeg -y -ss 13.7 -i renders/b3.mp4 -frames:v 1 /tmp/f.png
ffmpeg -y -i /tmp/f.png -vf scale=390:-1 /tmp/f-phone.png

Часть 12 · Сверка

Таблица: что говорит человек и какой приём

Часть 13 · Памятка

Что запомнить про моушен-дизайн нейросетью

FAQ

Частые вопросы

Читать дальше