Remotion вместо ffmpeg: программное видео для вайбкодеров

Сережа Рис · 24 February 2026

Remotion — лучший инструмент для генерации видео через AI-агента. React-компоненты читаемы для модели, параметры передаются через JSON, preview работает прямо в браузере. Я попробовал четыре варианта и остановился на нём.

Задача простая: хочу, чтобы агент собирал промо-ролики из данных. Передаю название продукта, слоган, цвета бренда — получаю MP4 на выходе. Без ручной работы, без After Effects, без дизайнера. О видео-пайплайне целиком писал раньше — там субтитры, превью, загрузка. Сейчас — про генерацию самого видео.

Что рендерим

Промо-ролик на 10–15 секунд. Лого влетает сверху, название появляется с fade-in, слоган выезжает снизу, в конце — CTA-кнопка. Параметры: название компании, слоган, цвета бренда. Один шаблон, разные данные на входе.

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

Подход 1: ffmpeg

Первая идея — ffmpeg. Он и так уже в моём пайплайне для сборки видео. Промпт был такой:

Агент сгенерировал. Команда заняла восемь строк. Фильтрграф выглядел как [0:v]overlay=x=W-w-10:y=10[bg];[bg]drawtext=text='sereja.tech':fontsize=48:fontcolor=white@0:enable='between(t,0,1)':fontcolor_expr=white@%{eif\\:min(t,1)\\:d}[out].

Проблемы:

Дебаг вслепую. Чтобы увидеть результат — дождись рендера. Опечатка в фильтрграфе? Перезапуск. Итерации занимают минуты.

Синтаксис не для агентов. Экранирование, вложенные выражения, зависимости между фильтрами. На простых командах агент справляется, но стоит добавить анимацию — путает скобки и обратные слеши.

Параметризации нет. Поменять текст или цвет — пересобирать всю команду целиком. Нельзя просто передать JSON и получить видео.

ffmpeg отлично режет, склеивает, конвертирует. Но генерировать анимации через фильтрграфы — это пытка. И для человека, и для модели.

Подход 2: Playwright

Второй вариант — записать CSS-анимацию в видео. HTML я уже использую для карточек и превью, Playwright умеет записывать видео страницы.

Агент собрал страницу, запустил Playwright, получил MP4. Визуально — красиво. А потом я запустил второй раз.

Timing-based запись. Playwright пишет видео в реальном времени. Анимация на 10 секунд — 10 секунд записи. Если система нагружена, кадры дропаются. Результат зависит от загрузки CPU в момент записи.

Недетерминированность. Два запуска на одних данных дают слегка разный результат. Для превью это допустимо, для продакшн-видео — нет.

Нет покадрового контроля. CSS-анимации работают по времени, а не по кадрам. Нельзя сказать “на кадре 30 текст полностью видим”. Только “через 1 секунду”. А сколько кадров в этой секунде — зависит от производительности.

Для статичного визуала Playwright работает лучше — скриншоты детерминированы. Но видеозапись через него — хрупкая конструкция.

Подход 3: Motion Canvas

Motion Canvas — open-source фреймворк для программных анимаций. TypeScript, генераторы через yield*, покадровый контроль.

Агент сгенерировал сцену. Синтаксис с генераторами выглядит понятно:

yield* circle().scale(1, 0.6);
yield* text().y(0, 0.8, easeOutBack);

Но всплыли ограничения.

Только Canvas API. Motion Canvas рисует всё через 2D Canvas. Нет HTML, нет CSS, нет flexbox. Текст — через ctx.fillText(), фон — через ctx.fillRect(). Для сложных layout это откат к ручному позиционированию.

Нет headless CLI. Чтобы отрендерить видео, нужно запустить dev-сервер и нажать кнопку в браузере. Автоматизация через Playwright возможна, но это костыль поверх костыля.

Темп разработки снизился. 18k звёзд на GitHub, MIT-лицензия — но последний стабильный релиз был в 2024-м. Для продакшн-зависимости это жёлтый флаг.

По-моему, Motion Canvas — инструмент для тех, кто пишет код руками и любит контролировать каждый кадр. Для агентского пайплайна с headless рендером — не вариант.

Подход 4: Remotion

Remotion перевернул задачу. Вместо “запиши экран” или “нарисуй на Canvas” — “опиши анимацию как React-компонент, а мы отрендерим покадрово”.

Агент создал компонент. Разница с предыдущими тремя подходами — моментальная.

Декларативность

Компонент описывает что происходит на каждом кадре, а не как записать экран:

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);

return <h1 style={{ opacity }}>{title}</h1>;

Модель читает это как обычный React. Не нужно знать ffmpeg-синтаксис или Canvas API. Claude, GPT, Gemini — все генерируют JSX без проблем, потому что React-кода в обучающих данных больше, чем чего-либо ещё.

Параметризация через props

Один компонент, разные данные:

{
  "title": "sereja.tech",
  "subtitle": "Вайбкодинг и автоматизация",
  "brandColor": "#6366f1"
}

JSON на входе, MP4 на выходе. Шаблон не меняется. Агент генерирует данные, Remotion рендерит.

Preview без рендера

@remotion/player показывает видео прямо в браузере. Перемотка, пауза, покадровый просмотр — мгновенно. Агент может открыть preview через Playwright, сделать скриншот конкретного кадра и проверить результат до рендера.

Покадровый рендер

Под капотом Remotion делает так: headless Chrome рендерит каждый кадр как скриншот, потом ffmpeg собирает PNG в видео. Детерминированно — один и тот же вход всегда даёт один и тот же результат.

Props/JSON
    │
    ▼
┌──────────────────┐
│  React Component │  JSX + useCurrentFrame()
│  (шаблон)        │  + interpolate()
└──────────────────┘
    │
    ▼
┌──────────────────┐
│  Headless Chrome │  Рендер каждого кадра
│  (puppeteer)     │  → PNG-скриншоты
└──────────────────┘
    │
    ▼
┌──────────────────┐
│  ffmpeg          │  PNG → MP4/WebM
│  (сборка)        │
└──────────────────┘
    │
    ▼
   video.mp4

CLI для автоматизации

Агент запускает одну команду — и получает файл. Никаких браузерных кнопок, никаких dev-серверов.

Lambda для масштаба

Если нужно рендерить много роликов — @remotion/lambda распределяет работу по AWS Lambda. Каждый кусок видео рендерится параллельно. Для пакетной генерации промо-роликов — самое то.

Сравнение

Remotion закрывает все шесть критериев. ffmpeg — три из шести, но с нечитаемым синтаксисом. Playwright проигрывает на детерминированности. Motion Canvas — на автоматизации.

Что стоит знать

Зависимость от Chrome. Remotion рендерит через headless Chrome. Это нестабильная точка: обновления Chrome могут сломать рендер, потребление памяти высокое. Для CI/CD нужно фиксировать версию.

Скорость. Локальный рендер — медленный. Каждый кадр проходит через Chrome. Для 10-секундного ролика при 30 fps это 300 скриншотов. Lambda решает проблему, но добавляет AWS в стек.

Лицензия. Бесплатно для индивидуалов и команд до трёх человек. Дальше — от $100 в месяц ($25/разработчик + $10/1000 рендеров). Для соло-вайбкодера ограничений нет.

React как зависимость. Remotion построен на React. Но это скорее плюс: React — один из самых представленных фреймворков в обучающих данных. Любая модель генерирует JSX уверенно.

Выводы

Я уже генерирую превью, карточки, OG-картинки через HTML и Playwright. Видео — та же логика, только с временной осью.

Remotion делает эту ось управляемой. React-компоненты описывают анимацию, props параметризируют контент, CLI автоматизирует рендер. Для вайбкодера, который направляет агента через промпты, это идеальный формат: декларативно, предсказуемо, читаемо для модели.

Видео как часть контент-пайплайна — уже реальность. Статья, OG-картинка, промо-ролик — всё из одного набора данных, всё собирается агентом.

FAQ

Remotion подходит для длинных видео?

Для коротких промо-роликов, интро, анимированных объяснений — идеально. Для длинных видео (лекции, скринкасты) Remotion избыточен: проще записать экран и обработать через ffmpeg. Покадровый рендер через Chrome на часовом видео будет слишком медленным.

Можно ли использовать Remotion без знания React?

Формально — нет, Remotion построен на React. Практически — агенту достаточно промпта с описанием анимации. Claude Code генерирует Remotion-компоненты так же уверенно, как обычные React-компоненты. Знание React нужно для отладки, не для генерации.

Чем Remotion лучше After Effects с автоматизацией?

After Effects требует лицензию, автоматизация через ExtendScript и aerender ограничена, проекты не версионируются через git. Remotion — код в репозитории, запуск из CLI, параметризация через JSON. Для агентского воркфлоу — принципиальная разница.

Motion Canvas догонит Remotion?

Motion Canvas — хороший инструмент с другой философией: Canvas API вместо DOM, генераторы вместо покадровых функций. Если появится headless CLI и вырастет активность — станет конкурентом. Пока разрыв в экосистеме и автоматизации слишком большой.

Об авторе

Подписаться на обновления — @sereja_tech