Видео-контент в продуктовых командах обычно означает таймлайны, слои и ручной экспорт. Поменялась цифра в отчёте — пересобирай ролик. Нужно двадцать вариантов под разные площадки — двадцать раз открой видеоредактор. Remotion делает другой заход: ролик описывается как React-компонент, а кадры рендерит headless-браузер. Вместо Project-файла — TypeScript-код, вместо ручных правок — git diff.

Фреймворк превращает задачу «сделать видео» в задачу разработки. Это даёт версионирование, code review, генерацию роликов в CI и автоматизацию под данные — всё то, что в видеоредакторе делается руками. Для команд, которые уже работают в React-экосистеме, барьер входа снижается до знания нескольких хуков и одного CLI.

Разберём, как Remotion устроен внутри, чем отличается от After Effects и DaVinci, какие сценарии закрывает лучше всего, и как подключить его к AI-агенту типа Codex — чтобы собирать ролики промптами, а не руками.

Что это

Remotion — фреймворк с открытым кодом для программного создания видео. Сцены задаются как React-компоненты: HTML, CSS, SVG, Canvas, WebGL. Движок рендерит каждый кадр через headless Chromium и склеивает их в видеофайл с помощью FFmpeg. Версия фреймворка на момент написания — 4.0.499, релиз 24 июля 2026 года.

Это не видеоплеер для React и не обёртка над существующим видеоредактором. Полноценный конвейер: dev-режим с горячей перезагрузкой, CLI-рендер и serverless-деплой на AWS Lambda. Кадр в Remotion — это реальный React-рендер в браузере, а не картинка-заглушка. Анимация считается по кадрам, не по времени — вы задаёте длительность в кадрах и частоту (fps), а фреймворк сам управляет таймлайном.

Работает с Tailwind, Three.js, Framer Motion — и вообще с любым React-пакетом. Если компонент работает в обычном React-приложении, он сработает и в Remotion — с теми же props, теми же хуками, теми же зависимостями.

Важно: Remotion требует детерминированности. Math.random() запрещён — вместо него используется random() из пакета remotion со статическим seed. Это гарантирует, что каждый кадр рендерится одинаково при повторном запуске.

Зачем нужно

Главное, что даёт Remotion — превращение видео в код. А код — это git, тесты, CI, шаблоны и автоматизация. Видеоредактор такого не даёт по определению: Project-файл бинарный, diff не читается, шаблонизация ручная.

Практические сценарии, где подход работает лучше традиционных:

  • Ролики на основе данных — финотчёты, спортивная статистика, еженедельные дайджесты. Данные из JSON или API попадают в props, на выходе готовый клип. Цифра изменилась — пересборка занимает секунды.
  • Видео-объяснения для документации — схемы и диаграммы приходят в движение вместо статичных скриншотов. Пользователь видит процесс в динамике.
  • Социальные ролики программно — TikTok, Reels, Shorts из постов или статей. Один шаблон — десятки вариаций под разные площадки.
  • AI-пайплайны — LLM создаёт сценарий и props, Remotion рендерит ролик. Сценарий = структурированный JSON, ролик = React-компонент. Промпт → код → рендер.

Как устроено

Архитектура Remotion строится на шести концепциях. Каждая решает конкретную задачу программной анимации.

КонцептЧто делает
CompositionОписывает ролик целиком: идентификатор, длительность в кадрах, частоту, размеры и React-компонент, который рендерит сцену
useCurrentFrame()Хук, возвращающий номер текущего кадра. Основа всей анимации — значение меняется покадрово, компонент перерисуется
interpolate()Проецирует кадры на произвольный числовой отрезок: координаты, прозрачность, угол поворота. Декларативный аналог tween-анимации
spring()Физическая интерполяция для естественной анимации — упругость, затухание. Длительность не фиксирована заранее, рассчитывается по физической модели
Sequence / SeriesКомпозиция сцен во времени. Sequence ставит элемент на конкретный кадр, Series выкладывает сцены подряд
Audio / Video / ImgМедиа-примитивы с покадровой синхронизацией. Video и Audio поддерживают trimBefore, trimAfter и volume

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

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";

// Регистрация композиции: 120 кадров при 30 fps = 4 секунды
export const RemotionRoot = () => (
  <Composition
    id="Title"
    component={Title}
    durationInFrames={120}
    fps={30}
    width={1920}
    height={1080}
  />
);

120 кадров при 30 fps — ролик длиной четыре секунды. Composition задаёт размеры, частоту и компонент. Движок рендерит каждый кадр от 0 до 119, вызывает React-рендер, делает скриншот через Chromium и передаёт в FFmpeg.

Инсайт: interpolate — декларативный аналог keyframe-анимации. Вместо ручной расстановки ключей на таймлайне вы описываете входной диапазон (кадры) и выходной (значения). Фреймворк сам считает промежуточные значения. extrapolateRight: “clamp” гарантирует, что значение не уйдёт за пределы диапазона после последнего ключевого кадра.

Когда использовать

Установка и базовый цикл из трёх команд:

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

Первая команда создаёт проект. Вторая — запускает Remotion Studio — визуальный редактор с превью, таймлайном и горячей перезагрузкой. Правите React-код — превью обновляется мгновенно. Третья команда поднимает dev-сервер.

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

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

Рендер с параметрами — props для шаблонизации, кодек и качество:

# Рендер с параметрами: props, кодек, качество
npx remotion render src/index.ts Title out/title.mp4 \
  --props='{"name":"Vitaly"}' \
  --codec=h264 \
  --quality=80

Совет: Props передаются через CLI, env-переменные, файл или API — Remotion создан для шаблонных роликов на данных: счётчики, отчёты, персонализированные клипы. Один компонент, сотни вариаций.

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

Когда локального рендера не хватает — на сцену выходит @remotion/lambda. Принцип: один кадр — одна Lambda-функция, потом FFmpeg склеивает результат. Параллельность даёт секунды вместо минут на рендер сотен кадров.

# Установка 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":"Vitaly"}'

Внимание: Lambda оплачивается по тарифам AWS. Для редких длинных роликов это выгоднее локального рендера, а для конвейера на десятки тысяч видео — безальтернативный вариант. Для разовых задач локальный CLI бесплатен.

Remotion и AI-агенты

Codex CLI взаимодействует с кодовой базой как разработчик: открывает файлы, меняет компоненты, запускает сборку. Remotion вписывается в этот контур без трения — видеоролик здесь это TypeScript, а не бинарный проект-файл. Агент может открыть Composition, поменять props, запустить рендер и вернуть путь к файлу.

Remotion поддерживает официальные Agent Skills — набор инструкций для AI-агентов вроде Claude Code, Codex, Kimi Code и Cursor. Установка одной командой:

npx skills add remotion-dev/skills

На момент написания доступно одиннадцать навыков:

НавыкНазначение
/remotion-best-practicesОбщий навык, включает остальные. Использовать, если не знаете, какой выбрать
/remotion-createСоздание нового проекта или композиции
/remotion-markupПравила разметки: композиции, анимация, типографика, медиа, тайминги
/remotion-mapsКарты: статичные, маршруты, маркеры, 3D-облёты через CesiumJS
/remotion-renderЗапуск рендера в видео или статичный кадр
/remotion-captionsСубтитры и подписи
/remotion-saasАрхитектура SaaS-приложений на Remotion
/remotion-interactivityИнтерактивность в Remotion Studio
/remotion-docsПоиск по документации Remotion и загрузка страниц как Markdown
/remotion-upgradeОбновление Remotion и связанных пакетов
/mediabunnyБраузерная обработка медиа через Mediabunny

Подключение как Skill в Codex без официального пакета — набор инструкций и примеров, который загружается в контекст агента для конкретной задачи. В случае Remotion навык содержит актуальные имена хуков, готовые шаблоны, команды CLI и бренд-конвенции проекта.

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

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

Пример содержимого SKILL.md:

# Remotion Skill

Триггеры: «собери видео», «сделай ролик», «отрендери».

Шаги:
- Открыть Root.tsx, найти нужную композицию или объявить новую.
- Взять готовый шаблон из templates/, не писать сцену с нуля.
- Для движения — interpolate и spring; таймеры под запретом.
- Длина ролика задаётся в кадрах: секунды умножить на fps.
- После изменений запустить npx remotion render и вернуть путь.

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

Промпт-driven воркфлоу в терминале Codex:

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

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

Главное преимущество — скорость итераций. Ролик правится как код: изменение, пересборка, превью. Никакого экспорта по сорок минут.

Содержимое Skill: защита от галлюцинаций

Remotion активно развивается — релизы выходят почти ежедневно. Встроенные знания LLM о его API отстают. Без Skill агент будет выдумывать имена хуков, параметры и команды. Навык закрепляет актуальную версию для агента.

Содержимое Skill, которое снижает риск галлюцинаций:

  • Перечень готовых шаблонов с описанием входных props — агент берёт существующее, не пишет с нуля.
  • Правила композиции — длительности секций, переходы, ограничения по кадрам.
  • Образцы рабочих промптов с результатом — агент повторяет паттерн, не угадывает вслепую.
  • Запрещённые приёмы — например, «CSS-анимации под запретом, движение только через interpolate».
  • Команды CLI с флагами вашего проекта — агент не придумывает несуществующие опции.

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

Сценарий полной автоматизации:

  • Данные — Notion, Google Sheets или любой API, отдающий JSON.
  • Codex читает данные и формирует props под каждый ролик.
  • Рендер — Codex вызывает lambda render под каждый набор props.
  • Результат — готовые URL складываются в соцсети, рассылку или S3-хранилище.

Конкретные применения: еженедельные AI-дайджесты в видеоформате, автоматические видео-цитаты из статей, именные онбординг-ролики и видео-отчётов по дашбордам.

Лицензия

Remotion распространяется по двухуровневой лицензии. Бесплатно для физических лиц, некоммерческих организаций и коммерческих компаний до трёх сотрудников. Для крупных for-profit-организаций требуется Company License — её покупают на remotion.pro. Исходный код открыт, но продажа, аренда или релицензирование производных продуктов запрещены.

Remotion — это не «видеоредактор для программистов». Это подход, где видео становится артефактом сборки, таким же предсказуемым и воспроизводимым, как билд.

Ограничения

Ограничения

Не заменяет After Effects — Remotion не предназначен для штучной моушн-графики сложной композиции.

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

Не для live-стриминга — Remotion рендерит файлы, не потоки.

Это видеосборка на выходе, а не потоковая передача в реальном времени. Для live-трансляций и интерактивных потоков нужен другой стек — WebRTC, медиа-серверы, стриминговые платформы. Remotion в этом контуре не работает по архитектурным причинам: кадр рендерится в Chromium и сохраняется на диск, а не отправляется в поток.

Тяжёлая видео-композиция — Премонтаж в духе Premiere Pro — не сценарий Remotion.

Инструмент не задумывался для нарезки длинных видеофрагментов с десятками дорожек и сложным монтажом. Медиа-примитивы Audio, Video и Img поддерживают синхронизацию, но это не замена нелинейному монтажу. Для многослойной композиции с видеовставками и сложными переходами лучше использовать видеоредактор, а результат скормить Remotion как входной файл.

Лицензия для крупных компаний — Бесплатная лицензия действует для физических лиц и компаний до трёх сотрудников.

Для for-profit-организаций большего размера требуется Company License. Стоимость — на сайте remotion.pro. Это не open-source в классическом смысле: исходный код доступен, но коммерческое использование крупными компаниями платное. Перед внедрением в продуктовый конвейер стоит проверить, подпадаете ли вы под Free License.

Антипаттерны

Антипаттерны

CSS-анимации вместо interpolate — Не использовать CSS-анимации, transition или requestAnimationFrame для движения в Remotion.

Весь кадр рендерится в Chromium покадрово, и CSS-анимации не дают предсказуемого результата — время в Remotion измеряется кадрами, не секундами. Для любого движения используется interpolate() или spring() с привязкой к useCurrentFrame(). CSS-анимации работают в браузере, но при рендере каждого кадра отдельно результат непредсказуем.

Math.random() в компонентах — Math.random() под запретом — он ломает детерминированность.

Каждый кадр рендерится отдельно, и случайное число будет разным для разных кадров. Альтернатива — random() из remotion с фиксированным seed: вызов random(‘my-seed’) всегда вернёт одинаковое значение. Без этого повторный рендер выдаст другое видео, а отладка превратится в ад.

setTimeout и setInterval — Не использовать setTimeout, setInterval или любые таймеры для управления временем в сцене.

Время в Remotion — это кадры, а не секунды. useCurrentFrame() возвращает номер кадра, и вся логика привязывается к нему. setTimeout сработает в момент рендера кадра, а не в момент его показа — результат будет непредсказуемым. Для задержек используется Sequence с параметром from, а не таймеры.

Писать сцены с нуля без шаблонов — При работе с AI-агентом — не позволять агенту писать сцены с нуля, если в Skill есть шаблоны.

Шаблоны фиксируют бренд-токены, структуру и конвенции проекта. Когда агент пишет с нуля, он может выдумать API, использовать устаревшие хуки или нарушить конвенции. Правило: если шаблон существует — используем его, если нет — добавляем шаблон в Skill после первой удачной сцены.

Чеклист

Чеклист

Создать проект и собрать шаблоны — Запустите npx create-video@latest, поднимите Remotion Studio через npm run dev.

Соберите одну-две шаблонные сцены под ваши задачи — например, intro с заголовком и data-card с числами. Проверьте, что сцены рендерятся локально через npx remotion render. Результат — готовый к использованию проект с базовыми компонентами.

Описать бренд-токены — Вынесите цвета, шрифты, размеры, fps и длительности в один модуль — например, brand.ts.

Это нужно и для компонент, и для Skill, чтобы агент использовал согласованные значения. Без единого источника бренд-токенов агент будет брать значения из промпта, и каждый ролик будет выглядеть по-разному.

Добавить Agent Skill — Создайте .codex/skills/remotion/SKILL.md с правилами, шаблонами и запрещёнными паттернами.

Или установите официальный пакет: npx skills add remotion-dev/skills. Проверьте, что Skill содержит список шаблонов, команды CLI и конвенции проекта. Без Skill агент будет галлюцинировать API — Remotion развивается быстро, встроенные знания LLM отстают.

Прогнать локальный рендер — Запустите npx remotion render для каждой шаблонной сцены.

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

Развернуть на Lambda при нагрузке — Установите @remotion/lambda, разверните функцию и сайт через npx remotion lambda functions deploy и npx remotion lambda sites create.

Прогоните тестовый рендер. При регулярной генерации десятков и сотен роликов Lambda — единственный разумный вариант: кадры рендерятся параллельно, время сокращается с минут до секунд.

Ссылки

Ссылки

По теме

По теме