Remotion: видео с нуля и монтаж через ИИ-агента — обзор и практический гайд

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

Remotion описывает видео кодом на React, а рендер превращает этот код в mp4. Собрать ролик с нуля или переделать готовый можно через кодинг-агента: Claude Code, Codex, Kimi Code или Cursor. Агент читает скилы проекта, создаёт композиции, правит тайминг и титры, запускает Studio и рендер. Руками перетаскивать ничего не нужно.

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

Видео с нуля и монтаж через агента

Два основных сценария, ради которых люди приходят к Remotion в 2026 году, выглядят так.

Первый — создать видео с нуля, в том числе на инфографике. Вы формулируете идею: «промо на 20 секунд, тёмный фон, крупный заголовок, три преимущества по очереди, логотип в конце». Или: «отчёт за квартал, график выручки, три цифры по рынкам, подписи и итоговый слайд». Агент с установленными скилами создаёт проект, пишет компоненты сцен, подбирает тайминги, подключает шрифты и запускает Studio. Дальше вы смотрите превью и говорите, что поменять: «заголовок крупнее», «переход медленнее», «второй блок на две секунды позже». Агент правит код, Studio сразу показывает результат. Рендер — одна команда.

Второй — смонтировать готовый материал. Есть запись экрана, интервью или нарезка из роликов, и нужно собрать из этого что-то осмысленное: нарезать на секвенции, расставить порядок, наложить титры и подписи, поменять музыку, добавить переходы и акценты. Всё это описывается кодом, а значит, и правится агентом: «убери паузу на 12-й секунде», «поставь подпись с именем спикера с 4-й по 9-ю секунду», «сделай вертикальную версию для Reels». Агент меняет структуру сцен и параметры, вы проверяете в студии.

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

Чтобы это работало, в репозитории есть набор Agent Skills — о них отдельный раздел ниже. Они и превращают «библиотеку для рендера» в инструмент, которым агент пользуется осознанно, а не наугад.

Что такое Remotion и из чего он состоит

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

• Композиция (Composition) — единица рендера: компонент плюс метаданные о длительности, разрешении, частоте кадров и входных параметрах. Композиции регистрируются в корневом файле проекта, и дальше любая команда рендера работает с ними по идентификатору.
• React-разметка — обычные компоненты, стили, картинки, шрифты и видео. Ничего специфического учить не нужно: если вы умеете верстать на React, вы умеете делать кадры.
• Анимации — вычисляются через interpolate(), spring() и номер кадра. Никакого скрытого состояния и таймеров: при повторном рендере вы получите тот же кадр.
• Studio — локальная студия в браузере: превью, таймлайн, панель параметров композиции.
• Рендерер — Node.js-пакет, который открывает проект в headless-браузере, снимает кадры и собирает их в видео через ffmpeg.

Важное следствие архитектуры: исходник видео — код в репозитории, а не бинарный файл проекта. Значит, работают привычные вещи: git, код-ревью, ветки, CI, шаринг шаблонов между командами.

Как проходит рендер

Рендер устроен прямолинейно и от этого предсказуемо. Node.js-процесс поднимает страницу с вашим проектом в headless Chrome, переходит на нужный кадр, ждёт загрузки шрифтов и медиа, снимает изображение и повторяет это для каждого кадра. Затем ffmpeg склеивает последовательность в видеофайл и добавляет звук. Для отдельного кадра есть режим still — получается PNG.

Из этого следуют практические свойства:

• Детерминизм. Пока в коде нет случайности и обращений к текущему времени, кадр номер 137 всегда будет одинаковым. Это позволяет кэшировать кадры и сравнивать версии ролика между собой.
• Стоимость пропорциональна кадрам. Минута в 30 fps — это 1800 кадров, и каждый надо отрисовать. Длинные ролики с тяжёлой графикой рендерятся долго, это нормальная плата за покадровую точность.
• Зависимость от браузера. На сервере нужен Chromium и системные библиотеки для него. В Docker и на облачных платформах это решается готовыми образами и слоями, но на голом Linux без зависимостей первый запуск обычно упирается именно в это.

Запуск рендера из терминала выглядит так:

npx remotion render MyComp out/video.mp4 --props=./input-props.json

Тот же рендер доступен как Node.js API: renderMedia() принимает сервис композиции, входные параметры и колбэк прогресса. Это то, что нужно, когда ролик генерируется по запросу из бэкенда: пришёл запрос с данными — собрали props — отрендерили — отдали ссылку.

Studio: правки мышкой, которые остаются в коде

Одно из главных отличий от «просто библиотеки для рендера» — интерактивная студия. Она открывается командой npx remotion studio и показывает композицию с таймлайном, превью и панелью входных параметров. Можно перематывать кадры, менять props, включать и выключать слои, смотреть, как ведут себя переходы.

Начиная с версии 4.0.475 в Studio появилась интерактивность в другом смысле: правки мышкой записываются обратно в код. Выделяете секвенцию на канвасе, тянете её, меняете масштаб или поворот — в файле обновляется style.translate, style.scale или style.rotate, а на таймлайне появляются или сдвигаются кейфреймы. Эффекты можно перетаскивать на слои и настраивать их параметры прямо в превью. Отмена и повтор работают привычными Ctrl+Z и Ctrl+Y.

Это компромисс, который снимает главный страх перед «видео в коде»: человек, которому нужно поправить отступ или тайминг, не обязан лезть в JSX. Он делает это как в обычном редакторе, а изменение остаётся в репозитории как дифф. Для компонентов, которые должны быть редактируемыми, есть отдельные правила — их описывает скил /remotion-interactivity.

Данные, шаблоны и пакетный рендер

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

Типичные сценарии, где это окупается:

• Персонализированные видео. Поздравления, отчёты для клиентов, итоги года — сотни версий из одной таблицы.
• Маркетинговые нарезки. Один мастер-ролик и набор вариантов под площадки: 16:9, 9:16, 1:1 с разными титрами и обложками.
• Продуктовые демо. Запись интерфейса, курсор, подсказки и подписи собираются из данных, а не переснимаются вручную после каждого релиза.
• Аудиограммы и подкасты. Волна, обложка, субтитры и таймкоды генерируются из аудиофайла.
• Анимация для приложений. Тот же код встраивается в продукт через @remotion/player — превью и анимации работают прямо в интерфейсе, без готовых mp4.

Для массовых задач есть renderMedia в цикле, параллельный рендер через несколько процессов и распределённый вариант на AWS Lambda.

Где рендерить: локально, на сервере или в облаке

Lambda-вариант устроен как распределённый рендер: проект выгружается в S3 как сайт, главная функция запускает десятки параллельных функций, каждая рендерит свой отрезок кадров, после чего результат скачивается, склеивается и кладётся обратно в S3. Отсюда высокая скорость на длинных роликах и оплата только за время работы функций. Подробности — в документации @remotion/lambda, там же разобраны регионы, размер диска и оценка максимальной длины видео.

Скилы для кодинг-агентов

Та самая часть, которая делает работу через агента реальной: Remotion поддерживает набор агентских скилов, описывающих, как правильно писать код под этот проект. Они рассчитаны на Claude Code, Codex, Kimi Code и Cursor.

npx skills add remotion-dev/skills

Альтернатива через GitHub CLI:

gh skill install remotion-dev/skills

Набор покрывает весь цикл работы: /remotion-create создаёт проект или композицию, /remotion-markup описывает правила разметки, анимаций, типографики и медиа, /remotion-studio поднимает превью, /remotion-render запускает рендер. Отдельно идут узкие темы: карты и маршруты (/remotion-maps), субтитры, работа с медиа через Mediabunny, архитектура приложений на Remotion (/remotion-saas), правки в Studio (/remotion-interactivity), лицензия и обновление версий.

Практический эффект простой: агент не угадывает API по памяти. Он читает скил, получает актуальные правила и команды, а документацию может подтянуть через /remotion-docs — этот скил ищет по докам и отдаёт страницу в Markdown. В связке «агент пишет разметку — Studio показывает результат — агент правит по скриншоту» цикл получается коротким: от идеи до готового mp4 без ручного переписывания кода.

Ограничения и подводные камни

• Лицензия. Remotion не под MIT. Бесплатно пользоваться могут частные лица, некоммерческие организации и компании до трёх сотрудников, включая коммерческие ролики. Крупным коммерческим компаниям нужна платная лицензия. Перед внедрением в продукт стоит прочитать LICENSE.md, а не полагаться на память.
• Не видеоредактор для монтажа. Здесь нет привычных дорожек с перетаскиванием клипов в том виде, как в Premiere или DaVinci. Монтаж длинного фильма с сотнями склеек делать неудобно, а вот генерацию и шаблоны — удобно.
• Детерминизм нужно поддерживать. Math.random() и Date.now() в разметке ломают повторяемость. Случайность и время передаются параметрами, иначе кадры начнут отличаться между рендерами.
• Тяжёлая графика стоит дорого. Three.js, Skia, сложные эффекты и большие видеофайлы увеличивают время рендера и требования к памяти. Для длинных роликов с 3D лучше сразу считать бюджет времени и денег.
• Шрифты и медиа грузятся асинхронно. Если не дождаться загрузки, получите кадр с пустым местом вместо текста. Для этого есть delayRender() и continueRender(), и пренебрегать ими не стоит.

С чего начать

Если Node.js уже стоит, проект создаётся одной командой:

npx create-video@latest

Мастер предложит шаблон — от пустого проекта до примеров с аудиограммой, субтитрами, Three.js, Skia и готовым редактором. Заодно можно подключить агентские скилы. Дальше цикл такой:

npx remotion studio
npx remotion render MyComp out/video.mp4

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

Итого

Remotion занимает нишу между видеоредактором и генератором видео из промпта: полный контроль над кадром, но описанный кодом, который можно версионировать, тестировать и наполнять данными. Главный сценарий — не «написать видео вручную», а поставить скилы своему агенту и собирать ролики с нуля или переделывать готовые словами: агент пишет сцены и монтаж, Studio показывает результат, рендер выдаёт файл. Для команд, которым нужны серии роликов, персонализация и встраивание видео в продукт, это заметно дешевле ручного монтажа. Для разового творческого ролика с сложным монтажом обычный редактор всё ещё проще.

Ограничение тоже честное: для художественного монтажа с ручной цветокоррекцией и сложными склейками привычный редактор остаётся удобнее. Remotion берёт своё там, где видео повторяется, наполняется данными и должно собираться быстро — в том числе агентом.