Remotion и Claude: моушн-графика за вечер без After Effects

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

Реальность превзошла все ожидания! После более глубокого погружения фраза «Моушн дизайнеры больше не нужны» даже стала еще ближе к правде. Понятно, что модель прекрасно кодит, а motion ролик - это и есть отрендеренная программа. Любую деталь можно поправить точечно, не перегенерируя всё заново. Дальше покажу, как с помощью Remotion и Claude Code собрать первый ролик с моушн-графикой и звуком за один вечер.

Как работает анимация с помощью нейросети: код вместо кадров

Модель, которая пишет текст, не рисует видео по кадрам. Она пишет программу, а уже программа рисует ролик. Для этого есть фреймворки Remotion и HyperFrames: через них ИИ-модель создаёт видео кодом, с раскладкой, движением, типографикой и звуком.

Тут у меня сразу возник вопрос: а зачем что-то ставить, если модель и так всё умеет? Умеет, но на выходе у неё только код, а не готовый mp4. Чтобы код превратился в видео, его надо запустить и отрисовать кадр за кадром, вот этим Remotion и занимается. Всё творческое (композиция, тайминги, движение) остаётся за моделью, а Remotion просто делает из её кода ролик.

И ещё одна тонкость. Если написать модели просто «сделай ролик», она сама решит, чем его делать. Может взять Remotion, а может собрать видео на Python, и тогда движение выйдет заметно беднее. Так что Remotion лучше сразу назвать в промпте, а не ждать, что модель сама до него додумается.

Волна таких роликов началась 22 сентября, когда аккаунт Claude в X выложил мультик про муравья и арбуз. С тех пор анимации, собранные моделью, стали отдельным жанром.

Главное отличие от видеогенераторов в контроле. Генератор отдаёт готовую картинку: если что-то не вышло, остаётся только генерировать ролик заново. Здесь картинка, движение, звук и камера описаны кодом, поэтому агент правит любую деталь точечно. То есть если не понравился цвет заголовка или скорость перехода, вы говорите об этом, и меняется только это место, а не весь ролик.

Пределы у анимации кодом, конечно, тоже есть (про них расскажу в конце). Но если нужно делать моушн-графику для промо-роликов, инфографики и анимированного текста, она закрывает задачу целиком.

Шаг 1. Ставим Remotion через Claude Code

Программистом быть не нужно, т.к. установку делает сама модель: открываем Claude Code, создаём папку под проект и выбираем Opus 5.5 активной моделью.

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

А ещё у Remotion есть официальные навыки для Claude Code. По сути это шпаргалка от самих разработчиков: как задавать тайминги, работать со звуком и картинками. Попросите модель поставить их вместе с Remotion (команда npx skills add remotion-dev/skills), и она будет заглядывать в эту шпаргалку каждый раз, когда делает ролик. Ошибок в коде от этого становится меньше.

Когда модель закончит, она откроет Remotion Studio прямо в браузере. Там видны все созданные анимации, и если студия открылась, значит всё готово к работе.

Учиться работать в студии не придётся. Это не After Effects, руками в ней ничего не анимируют. По сути это окно просмотра: слева список композиций (так Remotion называет отдельный ролик или сцену), в центре плеер, внизу шкала времени, по которой ролик можно пройти кадр за кадром. Код меняет Claude, а студия сразу показывает, что получилось. Готовый ролик рендерят в MP4 кнопкой Render прямо в студии или просят об этом модель.

Есть и альтернативный путь: HyperFrames. Механика та же: просим агента установить фреймворк, даём ему свод правил стиля и просим JavaScript-анимацию с нужным сюжетом в нужном стиле. Свод правил и есть ваша «методичка» (как должны выглядеть линии, цвета, движение), а про её сборку расскажу в четвёртом шаге.

Если не знаете, что выбрать, начните с Remotion: путь от установки до первого ролика у него описан подробнее.

Шаг 2. Пишем для Claude подробный промпт с референсом

От этого шага зависит результат. С ленивым общим промптом из серии «сделай лучший ролик» модель не поймёт, чего вы хотите, и выдаст скучную анимацию. Промпт должен быть конкретным, как техзадание дизайнеру.

В рабочем промпте четыре части:

1. Цель с длительностью. Не «промо для кофейни», а точная задача, где понятно, что в кадре и в каком порядке. Например, 20-секундный промо-ролик к открытию кофейни: чашка в 3D медленно поворачивается, название собирается из букв, три карточки с акциями влетают по очереди, в конце появляются адрес и логотип.

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

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

4. Звук. Связка Remotion и Claude Code не всегда добавляет звук сама. Поэтому прямо в первом промпте попросите сгенерировать звуковые эффекты и фоновую музыку на Python.

Референс в промпте сильнее всего, т.к. описать словами ритм и характер анимации достаточно трудно, а показать легко: модель сама вытащит из образца то, что вы бы не сформулировали.

Шаг 3. Работаем по сценам и правим по кадрам

Первый прогон почти всегда выходит простым, вроде пары плашек, текста и столбиков. Ролики из ленты с 3D и сложной динамикой сделаны не одним промптом. В одном подробном разборе это проверили напрямую. По промпту на 27 слов модель выдала тёмно-синий космос, светящееся кольцо и слоган, о котором никто не просил. Режиссёрская версия того же ролика потребовала промпт на 448 слов, 15 правок и ещё 12 по звуку. Другой ролик, всего на шесть секунд, занял около двух часов на картинку и ещё 45 минут на звук. Разница в режиссуре, а не в секретном инструменте.

Если нужен такой уровень, работайте по порядку.

1. Сначала раскадровка. Допишите к промпту из второго шага: «сначала предложи три варианта раскадровки и по одному кадру-картинке на каждую сцену, анимацию начнём после моего выбора». Поправить композицию на картинке почти ничего не стоит, а в готовой анимации это уже переделка.

2. Каждая сцена отдельной композицией. Тогда в студии у каждой сцены своя строка в списке, и её можно довести до ума, не задевая остальные. Когда все готовы, попросите собрать из них главную композицию по порядку, с переходами.

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

4. Раундами и по важности. Не больше десяти замечаний за раз, самые важные первыми. Обычно хватает двух-четырёх раундов. Проверять себя модель может и сама: попросите её перед сдачей отрендерить лист кадров (каждый 12-й кадр на одной картинке) и посмотреть на него.

5. Звук отдельным проходом, когда картинка уже не меняется. Звуки привязаны к движению, и любая правка таймингов их сдвигает.

Шаг 4. Доводим стиль: правила и список ошибок

Первый ролик редко попадает в стиль с первого раза. Узнаваемый почерк собирается из правил, которые вы накапливаете и отдаёте модели вместе с задачей.

Возьмём анимацию «рисовки от руки»: для неё частоту снижают, например до 12 кадров в секунду, и в итоге рендер становится проще, а движение выглядит человечнее. Второе правило скетч-стиля называют «кипением линий»: даже в статичной сцене контур в каждом кадре перерисовывается заново, и картинка не замирает. Такие приёмы и составляют методичку стиля. Их записывают один раз и потом прикладывают к каждому новому ролику.

В методичку стоит записать и правила движения в цифрах. Например, в кадре один главный объект, а второстепенные проходят 50–70% его пути и стартуют на 100–200 мс позже. С такими числами модели не нужно угадывать, что вы имели в виду под «динамично».

Ещё нужен список ошибок, потому что агент будет ошибаться: путать цвета, двигать элементы не так, забывать правила. Каждый раз, когда это случается, сообщайте ему об ошибке и просите её запомнить. Ошибки храните в отдельном файле или папке и просите учитывать их при каждой новой задаче. В итоге с каждой работой результат становится лучше.

И здесь снова помогает то, что ролик = код. Ошибку не нужно исправлять генерацией заново: агент меняет конкретную строку, а ваш файл ошибок не даёт ей вернуться.

Шаг 5. Подключаем внешние сервисы и Blender через MCP

Теперь, когда базовый ролик получается, дальше уже можно наращивать. Модель умеет работать как оркестратор: подключаете к ней внешние ИИ-сервисы, и итоговый ролик становится заметно лучше. Она сама вызывает нужный инструмент и встраивает результат в анимацию.

Отдельный кейс: 3D. Предметы, свет и камеру модель строит кодом на Three.js, и Remotion рендерит такую сцену так же, как остальной ролик (у него для этого есть пакет @remotion/three). Так делают многие 3D-ролики из ленты с вращающимися предметами, пролётами камеры и объёмными логотипами. Blender нужен, когда дело доходит до персонажей и сложных сцен. Инструмент blender-mcp связывает его с Claude Code. Вместо поиска нужной команды среди 400 меню вы пишете, например, «загрузи модель и перепривяжи текстуры», и это происходит. Так 3D становится доступен тем, кто Blender никогда не открывал.

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

Где кончаются возможности HTML-анимации

У анимации кодом есть честные пределы, и их лучше знать заранее.

Первый – персонажи. HyperFrames позволяет описать видео как HTML и отрендерить его, и для текста, графиков и интерфейсов этого хватает с головой. Но как только персонажу нужно совершить действие, HTML-анимация упирается в стену. Тут нужен 3D-инструмент вроде Blender (тот самый случай из предыдущего шага).

Второй – фотореализм. Анимацией кодом его не получить. Если нужен ролик, неотличимый от съёмки, то это задача для других инструментов.

Ну и напоследок, третий – нагрузка на ваш компьютер. Код модель создаст сама, а вот рендерить последовательность кадров придётся на своём железе. Для ориентира: 16-секундный ролик в 720p рендерился около восьми минут на GTX 1650.

Отсюда рабочий приём: черновые превью делайте в 360p (это примерно в 4 раза быстрее), а 720p оставьте для финального рендера. Пока вы правите тайминги и цвета, высокое разрешение не нужно, а время на каждой итерации экономится заметно.

Сколько это стоит: подписка против API и видеогенераторов

Деньги здесь решает способ доступа к модели. При работе по подписке, а не через API, токен стоит в несколько, а иногда и в десятки раз меньше. Для роликов, где модель много создаёт и переделывает код, разница ощутимая.

Если делать один-два таких ролика в неделю, подписки за двадцать долларов хватает с запасом. Это оценка по опыту, а не расчёт по лимитам: при большем объёме ориентируйтесь на свою нагрузку.

Ролик уровня ленты с десятками правок расходует заметно больше. В том же разборе объясняющий ролик про гравитационное линзирование (одна задача и три ночных раунда доводки) занял 5,5 часа и по ценам API стоил бы около 90 долларов.

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

Ключевые термины

• Remotion – Фреймворк, в котором видео описывается кодом, поэтому ИИ-модель может создавать ролики программно.
• HyperFrames – Фреймворк, который позволяет описать видео как HTML и отрендерить его.
• Remotion Studio – Окно просмотра Remotion в браузере: список композиций, плеер со шкалой времени и рендер. Анимацию в нём руками не делают, её меняет Claude в коде.
• Композиция – Отдельный ролик или сцена в проекте Remotion. Сцены доводят по одной, а потом собирают в главную композицию.
• Three.js – Библиотека для 3D в браузере. Модель строит на ней предметы, свет и камеру, а Remotion рендерит сцену в видео.
• MCP – Стандартный способ подключить языковую модель к внешним инструментам и программам, например к Blender или генераторам голоса и музыки.
• Кипение линий – Приём скетч-анимации, при котором контур перерисовывается в каждом кадре, даже если объект стоит на месте.
• Референсное видео – Чужой ролик-образец, по которому модель перенимает темп, раскладку, типографику и характер движения.

Итог: ролик за вечер по чек-листу

• Открыть Claude Code с Opus 5.5 и попросить установить Remotion и его официальные навыки в папку проекта
• Написать промпт: цель с длительностью, референс, раскладка и типографика из образца
• Попросить три варианта раскадровки с кадром на каждую сцену и только потом анимацию
• Делать каждую сцену отдельной композицией и править с точной секундой, до десяти замечаний за раунд
• Попросить сгенерировать звуковые эффекты и музыку на Python
• Завести файл ошибок и дописывать в него каждую ошибку агента
• Делать превью в 360p, финал – в 720p

На этом все. Благодарю за внимание!

Проверьте себя

1. Вы попросили модель «сделать красивый премиальный ролик», и результат вышел скучным. Что поправить в первую очередь?

• А. Повторить тот же промпт ещё несколько раз
• Б. Сменить фреймворк с Remotion на HyperFrames
• В. Дать конкретную цель с длительностью и темой и приложить референсное видео

2. Ролик получился без звука. Как это исправить? (Верных ответов несколько.)

• А. В исходном промпте прямо попросить сгенерировать звуковые эффекты и музыку на Python
• Б. Повысить частоту кадров
• В. Подключить музыкальный сервис через MCP

3. Клиенту нужен ролик, где персонаж прыгает и танцует. Что учесть?

• А. Анимация кодом даст фотореалистичного персонажа
• Б. Достаточно подробнее описать танец в промпте Remotion
• В. HTML-анимация упирается в действия персонажа – понадобится 3D-инструмент вроде Blender

4. Агент снова сделал ту же ошибку в стиле, что и в прошлом ролике. Что поможет?

• А. Записывать ошибки в отдельный файл и просить агента учитывать его в каждой работе
• Б. Перейти на оплату через API
• В. Начинать каждый ролик в новой сессии без истории

5. Рендер в 720p идёт восемь минут, а правок много. Как ускорить работу?

• А. Отказаться от звука
• Б. Каждый раз рендерить в финальном качестве, чтобы видеть всё точно
• В. Делать черновые превью в 360p, а 720p оставить для финала

6. Зачем в работе нужна Remotion Studio?

• А. В ней вручную расставляют ключевые кадры, как в After Effects
• Б. Чтобы смотреть ролик по кадрам, находить неудачные места с точной секундой и рендерить, а код меняет Claude
• В. Без неё Claude не сможет написать код ролика