Remotion — фреймворк программной генерации видео на React и его использование в OpenAI Codex

Remotion превращает создание видео в задачу разработки на React: сцены описываются компонентами, а анимация зависит от номера кадра. Такой подход подходит для шаблонных роликов, автоматической сборки по данным, версионирования и проверки изменений через обычный процесс разработки.

По состоянию на 9 сентября 2026 года последний релиз в официальном репозитории — v4.0.523. Remotion активно развивается: после указанного в предыдущей редакции v4.0.518 вышли обновления Studio, новый эффект и переход, исправления рендера и пакет @remotion/video-matting. Перед обновлением проекта сверяйте команды, совместимость пакетов и ограничения облачного рендера с официальной документацией.

Оглавление

1. Что такое Remotion и из каких API собирается композиция.
2. Как запустить Studio и проверить локальное превью.
3. Как выполнить локальный рендер и передать входные данные.
4. Как подключить Remotion Agent Skills к Codex.
5. Для каких практических сценариев подходит Remotion.
6. Как устроен облачный рендер на AWS Lambda.
7. Как проверить готовую композицию и итоговый файл.

Что такое Remotion

Remotion — фреймворк программной генерации видео на React. Сцены можно собирать из HTML, CSS, SVG, Canvas, WebGL, аудио и видео, а рендерер рассчитывает композицию по кадрам и создаёт итоговый медиафайл.

Remotion Studio предоставляет локальное превью и инструменты работы с композицией. Если Studio подключена к серверу, из неё также можно запускать рендер.

Основные возможности:

• декларативные сцены на React;
• покадровая анимация, связанная со временем композиции;
• параметризованные ролики с входными данными;
• локальный интерфейс командной строки и серверный рендер через Node.js API;
• облачный рендер на AWS Lambda и GCP Cloud Run;
• интеграция с React-экосистемой, включая TailwindCSS, Three.js и GSAP.

Основные API композиции

Минимальная сцена с появлением заголовка:

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const Title = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0b1020',
      }}
    >
      <h1 style={{color: 'white', fontSize: 96, opacity}}>
        Hello, Remotion
      </h1>
    </AbsoluteFill>
  );
};

Регистрация композиции:

import {Composition} from 'remotion';
import {Title} from './Title';

export const RemotionRoot = () => (
  <Composition
    id="Title"
    component={Title}
    durationInFrames={120}
    fps={30}
    width={1920}
    height={1080}
  />
);

При fps={30} композиция длится четыре секунды: 120 / 30 = 4.

Запуск Remotion Studio

Для работы со Studio требуется интерфейс командной строки Remotion (CLI). В большинстве шаблонов он уже установлен. Для существующего проекта добавьте пакет отдельно:

npm i @remotion/cli

Команда запуска зависит от шаблона:

# Обычные шаблоны
npm start

# Шаблоны Next.js и React Router 7
npm run remotion

Studio также можно запустить напрямую:

npx remotion studio

Сервер стартует на порту 3000 или выберет следующий доступный порт. После запуска Studio должна открыться в браузере и показать зарегистрированные композиции.

Локальный рендер и входные данные

Базовый рендер зарегистрированной композиции:

npx remotion render src/index.ts Title out/title.mp4

Входные свойства композиции (props) позволяют использовать один шаблон для разных клиентов, отчётов или публикаций:

npx remotion render src/index.ts Title out/title.mp4 --props='{"name":"Sergey"}'

Компонент должен принимать и валидировать ожидаемую структуру данных. Для повторяемого производственного процесса храните схему входных параметров рядом с композицией и фиксируйте пакеты remotion и @remotion/* на одной версии.

Подключение Remotion Agent Skills к Codex

Remotion поддерживает Agent Skills — набор инструкций с практиками работы над Remotion-проектами. Они предназначены в том числе для Codex, Claude Code, Kimi Code и Cursor.

Установка набора по документации:

npx skills add remotion-dev/skills

При создании нового проекта через bun create video также можно добавить Skills.

Набор включает отдельные навыки для создания композиций, разметки и анимации, запуска Studio, рендера, субтитров, карт, интерактивности, обновления проекта и поиска по документации. Если задача затрагивает несколько областей, в официальном наборе предусмотрен общий навык /remotion-best-practices.

Инструкции можно дополнить правилами конкретного проекта:

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

Пример задачи для Codex:

Создай 10-секундную композицию Q1Report с тёмным фоном.
Плавно покажи заголовок «Q1 2026 — Revenue +47%» и спарклайн
из data/revenue.json. Проверь композицию в Studio и отрендери
результат в out/q1.mp4.

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

Полезные сценарии

Регулярные ролики по данным

Задача: выпускать отчёты, спортивную статистику или персонализированные ролики по одному шаблону.

Передайте данные в JSON, преобразуйте их в визуальные элементы компонента и запустите рендер через CLI или Node.js API. Наблюдаемый результат — отдельный файл для каждого набора параметров. Перед массовым запуском проверьте схему данных и поведение при пустых или некорректных значениях.

Видео для документации и онбординга

Задача: регулярно обновлять объяснение интерфейса, диаграмму или последовательность действий.

Codex может редактировать React-компоненты, а Remotion — воспроизводимо собирать анимацию. Сначала проверьте композицию в Studio, затем выполните рендер и просмотрите готовый файл. Для записи реального интерфейса и свободного ручного монтажа специализированный видеоредактор может подойти лучше.

Серия социальных роликов

Задача: выпускать ролики одинакового формата с разными текстами, изображениями и субтитрами.

Передавайте содержимое и параметры выпуска во входных данных. Проверяемый результат — файлы одинакового размера и длительности, соответствующие каждому набору параметров. Remotion создаёт медиафайл; публикация в социальной сети остаётся отдельным этапом.

Облачный рендер на AWS Lambda

Пакет @remotion/lambda распределяет рендер между параллельными вызовами AWS Lambda. Проект разворачивается в S3 как сайт, функция открывает его, параллельные вызовы обрабатывают небольшие части видео, а начальный вызов скачивает и объединяет фрагменты. Готовый файл загружается обратно в S3.

Для настройки нужны аккаунт AWS и пользователь с необходимыми разрешениями. Документация Remotion рекомендует минимальный набор прав.

Lambda подходит, если:

• видео короче примерно 80 минут при Full HD (1920×1080), а обработка укладывается в тайм-аут AWS около 15 минут;
• регионального лимита параллельных вызовов достаточно или вы готовы запросить его увеличение;
• можно использовать AWS в одном из поддерживаемых Remotion регионов;
• заранее учтены стоимость и лицензионные условия.

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

• функции доступно до 10 ГБ хранилища; оно используется и для фрагментов, и для собранного результата, поэтому итоговый файл ограничен примерно 5 ГБ;
• стандартный лимит по умолчанию составляет 1000 одновременно выполняющихся Lambda-вызовов на регион и может быть увеличен;
• кодирование AV1 в Lambda недоступно;
• стоимость зависит от региона, памяти, длительности, сложности сцены и степени распараллеливания;
• компаниям, которым нужна лицензия для облачного рендера, требуется настроить Cloud Rendering Units.

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

Когда Remotion не подходит

Remotion ориентирован на программное создание медиафайлов. Для прямой трансляции потокового видео нужен другой рабочий процесс. After Effects, Premiere Pro или DaVinci Resolve могут лучше подойти для штучной моушн-графики, сложной цветокоррекции и работы с длинными исходниками на интерактивном таймлайне.

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

Проверка результата

После настройки проекта выполните короткий проверочный цикл:

1. Запустите npm start, npm run remotion или npx remotion studio в зависимости от шаблона.
2. Убедитесь, что композиция появилась в Studio без ошибок сборки.
3. Просмотрите начало, переходы и последний кадр.
4. Запустите локальный рендер тестовой композиции.
5. Проверьте наличие файла, его длительность, размеры кадра, звук и соответствие входным параметрам.
6. Для Lambda дождитесь завершённого статуса и проверьте доступность итогового объекта в S3.

Материал основан на официальной документации и истории релизов. Приведённые команды не заявлены как выполненные в конкретном пользовательском окружении.

Официальные ссылки

• Документация Remotion
• Remotion Studio
• Справочник API
• Remotion Agent Skills
• Remotion Lambda
• Релизы Remotion

Следующий шаг

video-shotcraft — как собирать кинематографичные видео на Remotion в Claude Code и Codex

Связанные материалы

• Статья: Как я решил узнать, что вообще живет на моих серверах, и позвал Codex с фонариком
• Блог: Codex теперь управляет вашим Mac — и это больше не про код
• База знаний: Skills в OpenAI Codex — как расширить возможности coding-агента

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

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov