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

Remotion превращает создание видео в задачу разработки на React. Вместо таймлайнов и слоёв — компоненты, props и хуки. Для разработчиков это снимает целый класс боли: версионирование, code review, генерация роликов в CI и автоматизация под данные.

В материале разберём, как устроен фреймворк, чем он отличается от Adobe и DaVinci и как подключить его к OpenAI Codex CLI как Skill, чтобы собирать видео промптами.

Что такое Remotion

Remotion — open-source фреймворк для программной генерации видео. Сцены описываются как обычные React-компоненты (HTML, CSS, SVG, Canvas, WebGL), а движок рендерит их кадр за кадром через headless Chromium и склеивает в видеофайл с помощью FFmpeg.

Ключевые особенности:

• Декларативное API на React
• Покадровый рендер через Chromium
• Поддержка аудио, видео-инпутов и данных из любых API
• Локальный CLI и serverless-рендер на AWS Lambda
• Совместимость с Tailwind, Three.js, Framer Motion и всей React-экосистемой

Архитектура

Минимальный пример сцены:

import { interpolate, useCurrentFrame } from "remotion";

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

  return (
    <div
      style=
        flex: 1,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#0b1020",
      
    >
      <h1 style= color: "white", fontSize: 96, opacity >Hello, Remotion</h1>
    </div>
  );
};

И регистрация в корне:

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

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

Установка и базовый цикл

npx create-video@latest
cd my-video
npm run dev

Команда поднимает Remotion Studio — локальный UI с превью, таймлайном и live-reload. Меняете компонент — видео обновляется без перезапуска.

Локальный рендер:

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

С параметрами:

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

Рендер в облаке: AWS Lambda

Для масштабирования есть пакет @remotion/lambda. Каждый кадр считается на отдельной Lambda-функции, потом всё склеивается. Сотни кадров рендерятся параллельно за секунды.

npm i @remotion/lambda
npx remotion lambda functions deploy
npx remotion lambda sites create src/index.ts --site-name=my-video
npx remotion lambda render <site-url> Title --props='{"name":"Sergey"}'

Где Remotion заходит лучше всего

• Шаблонные ролики по данным: финансовые отчёты, спортивная статистика, сводки
• Объясняющие видео для документации и онбординга — диаграммы оживают
• Социальные ролики из постов (TikTok / Reels / Shorts) программно
• Бренд-ролики с регулярной перегенерацией под новые цифры
• AI-пайплайны: LLM генерит сценарий и props, Remotion собирает видео

Чего ожидать не стоит:

• Полноценной замены After Effects для штучной моушн-графики
• Live-стриминга — Remotion рендерит файлы, не потоки
• Тяжёлой видео-композиции в духе Premiere Pro

Remotion в OpenAI Codex

Codex CLI работает с проектом как обычный AI-инженер: читает код, правит компоненты, гоняет команды. Remotion ложится сюда естественно — это TypeScript-проект, где видео = код.

Подключение как Skill

Skill в Codex — папка с инструкциями и примерами, которую агент подгружает в контекст под конкретную задачу. Для Remotion это даёт:

• Знание актуального API (Composition, interpolate, spring, Sequence)
• Шаблоны сцен под повторяющиеся форматы
• Команды CLI и параметры рендера
• Конвенции проекта (бренд-цвета, шрифты, длительности)

Минимальная структура:

.codex/skills/remotion/
├── SKILL.md          # инструкции агенту
├── templates/
│   ├── intro.tsx
│   ├── data-card.tsx
│   └── outro.tsx
└── examples/
    └── sample.tsx

Пример SKILL.md:

# Remotion Skill

Когда пользователь просит «собери видео» / «сделай ролик» / «рендер»:

1. Открой `src/Root.tsx`, найди подходящую `Composition` или создай новую.
2. Используй компоненты из `templates/`. Не пиши сцены с нуля.
3. Для анимации — только `interpolate` и `spring`, без `setTimeout`.
4. Длительность задавай в кадрах: `durationInFrames = seconds * fps`.
5. После правок запусти `npx remotion render` и покажи путь к файлу.

Бренд:
- Шрифт: Inter
- Основной цвет: #0b1020
- Акцент: #f59e0b
- fps: 30, размер: 1920x1080

Промпт-driven воркфлоу

В терминале Codex:

> Собери 10-секундный ролик: фон тёмный, по центру плавно появляется
> текст "Q1 2026 — Revenue +47%", в нижней части — спарклайн по
> данным из data/revenue.json. Отрендери в out/q1.mp4

Codex прочитает Skill, возьмёт шаблон, подставит props, запустит рендер и вернёт путь. Нужна правка — «сделай текст крупнее, акцентным цветом» — он отредактирует компонент и перерендерит.

Что класть в Skill, чтобы агент не галлюцинировал

• Список доступных шаблонов с описанием входных props
• Правила композиции (длительности секций, переходы)
• Примеры удачных промптов и ожидаемого результата
• Список запрещённых паттернов (например, «не используй CSS-анимации, только interpolate»)
• Команды CLI с параметрами вашего проекта

Связка Remotion + Codex + данные

Полный пайплайн под автоматизацию:

1. Источник данных (Notion, Google Sheets, API) → JSON
2. Codex читает данные, формирует props для каждого ролика
3. Codex запускает remotion lambda render для каждого набора props
4. Получает URL готовых видео
5. Публикует в социалки, прикладывает к рассылке или складывает в S3

Эта схема работает для:

• Еженедельных AI-сводок в формате видео
• Автогенерации видео-цитат из статей
• Персональных видео-онбордингов (имя клиента в кадре)
• Видео-отчётов по дашбордам

Чек-лист для старта

По теме

Статья: Как я решил узнать, что вообще живет на моих серверах, и позвал Codex с фонариком

Блог: Codex теперь управляет вашим Mac — и это больше не про код

База знаний: Skills: Codex vs Claude Code — сравнение и совместимость

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