Claude Opus 5.5 и Remotion: полный процесс создания продуктовых видео кодом

Главный вывод: связка Claude Opus 5.5 и Remotion хорошо подходит для продуктовых роликов, анимации интерфейса, демонстрации кода, графиков, видео о релизах и шаблонов, из которых нужно выпускать много вариантов. Opus 5.5 разбирает задачу и пишет либо исправляет React/TypeScript-код, а Remotion покадрово рендерит этот код в видео. Это не диффузионная модель: одна текстовая команда сама по себе не возвращает фотореалистичный MP4.

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

Ниже — рабочий путь, сверенный с официальной документацией. Критерий успеха — MP4, который действительно отрендерился и прошёл проверку на вашей машине или в CI. Непроверенный ролик из соцсетей, обещание фиксированного времени и «цена одного видео» без замеров доказательством не считаются.

Быстрый выбор инструмента

Задача	С чего начать	Почему
Обзор продукта, UI-демо, разбор кода	Remotion	Зрелая модель React-композиций, props, таймлайн и разные способы рендера
HTML/CSS-анимация и быстрая передача результата от агента	HyperFrames	Видео описывается обычным HTML, React не обязателен
Десятки роликов по одному шаблону	Любой из двух	Оба дают детерминированный рендер, если контент вынесен в параметры
Реалистичные люди, места, сложная операторская сцена	Отдельный этап создания медиа	Кодовое видео не заменяет генерацию или съёмку таких кадров
Один короткий ролик без дальнейшего переиспользования	Сначала минимальный прототип	Платформа пакетного рендера может оказаться лишней

Полезная граница проходит не между «AI-видео» и «обычным видео», а между кадрами, которые можно описать кодом, файлами, данными и временем, и кадрами, где главное — непредсказуемая визуальная генерация. Чем ближе ролик к сайту, презентации, интерфейсу, дашборду, субтитрам или брендовой моушн-графике, тем сильнее преимущества подхода.

За что отвечает Claude Opus 5.5

Anthropic выпустила Claude Opus 5.5 22 сентября 2026 года. Точный ID модели в API — claude-opus-5-5. Компания позиционирует её для длительных агентных задач по программированию и интеллектуальной работе; для нашего сценария важны пять практических функций:

1. Разложить бриф на сцены, компоненты, интервалы и проверяемые условия приёмки.
2. Изменять несколько файлов в существующем проекте Remotion или HyperFrames.
3. Выносить жёстко заданный текст в props, JSON и манифесты рендера.
4. Запускать проверки, предпросмотр и рендер, а затем исправлять первопричину ошибки.
5. Сохранять единые правила бренда во множестве вариантов.

При этом результат вызова модели — текст, код или патч, но не видеофайл. MP4 создаётся локально, на CI-воркере, сервере, Remotion Lambda или в инфраструктуре HyperFrames. Стоимость токенов модели и стоимость CPU, памяти, Chrome, FFmpeg, хранения и трафика нужно считать отдельно.

До первого промпта зафиксируйте входные данные

Фраза «сделай красивое видео о продукте» часто приводит к эффектному, но хрупкому прототипу. Создайте brief.md, где явно указаны цель, формат, сцены, параметры, ограничения и критерии готовности:

# Техническое задание на видео

- Цель: показать, как пользователь создаёт API-ключ и отправляет первый запрос.
- Аудитория: разработчики, которые впервые оценивают продукт.
- Формат: 1920x1080, 30 fps, 8 секунд, без звука.
- Composition ID: ProductExplainer
- Сцены:
  1. Проблема и обещание результата, 0–2 с
  2. Три шага работы с продуктом, 2–6 с
  3. Результат и призыв к действию, 6–8 с
- Входные данные: productName, headline, steps, accentColor, пути к скриншотам
- Ограничения: использовать только локальные материалы; не обращаться к сети во время рендера.
- Критерии приёмки:
  - Текст не выходит за безопасные поля.
  - В консоли нет ошибок.
  - Композиция рендерится в MP4 через CLI.
  - Второй вариант можно получить, изменив только props.json.

Такой файл не мешает творчеству. Он объясняет агенту, что именно считается завершённой работой. Разрешение, FPS, длительность, ID композиции, пути к файлам, запрет сетевых запросов и команда проверки должны задаваться человеком, а не угадываться моделью.

Минимальный проект Remotion по официальной инструкции

В руководстве Remotion для coding agents сначала нужны Node.js и агент вроде Claude Code. Официальная последовательность команд:

npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

Команды создают Blank-проект, ставят зависимости, добавляют Remotion Agent Skills и запускают Remotion Studio. В отдельном терминале откройте Claude Code в том же репозитории:

cd my-video
claude

Не начинайте с запроса на целую платформу. Сначала нужен один восьмисекундный ролик без удалённых ресурсов:

Сначала прочитай brief.md и изучи существующий проект Remotion.
Создай одну композицию с точным ID ProductExplainer.
Используй 1920x1080, 30 fps и 240 кадров.
Сделай аккуратный продуктовый ролик из трёх сцен только на React, CSS и встроенном SVG.
Композиция должна принимать productName, headline, steps и accentColor как props,
а для предпросмотра в Studio задать разумные значения по умолчанию.
Оставляй весь текст внутри безопасного поля 120 px. Не загружай удалённые материалы во время рендера.
Используй покадровые API Remotion, чтобы каждый кадр воспроизводился детерминированно.
После правок перечисли изменённые файлы, команду предпросмотра и точную команду рендера.
Не сообщай об успехе, пока команда рендера не завершится с кодом 0.

Почему эти ограничения полезны:

• Стабильный Composition ID позволяет CLI и CI всегда обращаться к одной композиции.
• Анимация от номера кадра, а не от реального времени, делает результат воспроизводимым.
• Локальные ресурсы отделяют ошибки кода от CORS, недоступной сети и исчезнувших URL.

Предпросмотр, рендер и проверка результата

Сначала убедитесь в Remotion Studio, что ProductExplainer проигрывается целиком. Затем создайте файл:

npx remotion render ProductExplainer out/product-explainer.mp4

По документации Remotion, без ID композиции CLI предложит выбор, а без пути сохранит результат в out. Для автоматизации оба аргумента лучше указывать явно, чтобы процесс не ожидал ручного ввода.

Минимальный пример действительно готов, только если:

1. Команда завершилась с кодом 0.
2. Файл out/product-explainer.mp4 существует и открывается.
3. В нём нет обрезанного текста, пустых кадров и пропавших ресурсов.
4. В терминале и консоли браузера нет необработанных исключений.
5. Второй вариант рендерится без изменения компонентов — только с другими props.

Проверку можно автоматизировать через ffprobe:

ffprobe -v error \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -show_entries format=duration \
  -of json out/product-explainer.mp4

Так CI сможет отклонить нулевую длительность, неверное разрешение или файл без видеопотока, даже если расширение .mp4 выглядит правильным.

Превратите ролик в параметризованный шаблон

Remotion объединяет входные props с props по умолчанию, причём входные значения имеют приоритет. Позже calculateMetadata() может вычислять длительность, размеры или дополнительные данные. Для первой рабочей версии проще хранить входные значения в локальном JSON.

props.json:

{
  "productName": "Acme API",
  "headline": "Первый запрос за три шага",
  "steps": [
    "Создайте API-ключ",
    "Выберите модель",
    "Отправьте запрос"
  ],
  "accentColor": "#6D5EF9"
}

Рендер:

npx remotion render ProductExplainer out/acme-api.mp4 --props=props.json

Remotion отдельно предупреждает, что Windows Shell может удалить кавычки из встроенного JSON. Поэтому файл безопаснее, чем --props='{"hello":"world"}', особенно в кроссплатформенном CI.

Для локализаций не копируйте React-композицию десять раз. Отделите представление от контента:

src/
  components/
  ProductExplainer.tsx
  Root.tsx
content/
  en.json
  ru.json
  de.json
public/
  screenshots/
render-manifest.json

Компоненты отвечают за визуальную логику, языковые файлы — за текст и пути к материалам, а манифест связывает композицию, язык, props и имя результата. Такая структура упрощает проверку перевода, повторный запуск и сравнение версий.

Как разбирать ошибку рендера

Сначала включите подробный лог, как рекомендует Remotion:

npx remotion render ProductExplainer out/debug.mp4 --log=verbose

Если из-за параллельных потоков одни и те же строки повторяются, временно оставьте один поток:

npx remotion render ProductExplainer out/debug.mp4 \
  --log=verbose \
  --concurrency=1

Дальше двигайтесь по порядку:

1. Проверьте ID композиции. Регистр должен точно совпадать с зарегистрированным <Composition>.
2. Отделите props от кода. Сначала отрендерите значения по умолчанию, затем подключите JSON.
3. Убирайте компоненты по одному. Видео, шрифты, графики и тяжёлые эффекты удаляются до тех пор, пока пустая композиция не начнёт рендериться.
4. Проверьте среду браузера и ресурсы. CORS, сертификаты, шрифты, GPU/WebGL и headless Chrome могут вести себя иначе, чем интерактивный предпросмотр.
5. Проверьте ожидание асинхронных данных. Ресурс должен завершить поддерживаемый Remotion цикл ожидания, а не зависнуть навсегда.
6. Сохраните доказательства. Нужны точная команда, props, коммит, первый причинный стек и версии окружения.

Возвращая ошибку Claude Code, передайте точную команду и первую первопричину, а не сотни одинаковых строк. Попросите сначала объяснить причину, затем предложить минимальный патч и повторить ту же проверку.

Remotion, HyperFrames или диффузионное видео

HyperFrames — открытый HTML-ориентированный фреймворк HeyGen. Он превращает HTML, CSS, медиа и seekable-анимацию в детерминированный MP4. Минимальный CLI-путь сейчас выглядит так:

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

В текущем README указаны Node.js 22+ и FFmpeg. Можно использовать GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI и собственные адаптеры; основной замысел — дать агенту привычный HTML вместо обязательного React-проекта.

Критерий	Remotion	HyperFrames	Диффузионное видео
Формат авторинга	React/TypeScript	HTML/CSS/JS	Текстовые, графические или видео-промпты
Воспроизводимость	Высокая при фиксированных входах	Высокая по замыслу	Ниже: повторный запуск может отличаться
Лучший сценарий	UI, код, графики, долгоживущие шаблоны	Веб-анимация, короткие брендовые ролики, передача от агента	Реалистичные люди, сцены и киношные кадры
Параметры	props, данные, компоненты	data attributes, HTML, скрипты	Параметры модели и исходные материалы
Зрелость	Более развитая React-экосистема	Более новый и лёгкий HTML-подход	Зависит от поставщика
Основные расходы	Разработка и локальный/облачный рендер	Разработка и локальный/облачный рендер	Генерация и последующий монтаж

Правило выбора:

• Берите Remotion, если команда уже работает с React или нужен сложный, долгоживущий набор компонентов.
• Пробуйте HyperFrames, если визуальный язык близок к вебу и удобнее получить от агента читаемый index.html.
• Если главное — реалистичный видеоряд, создавайте его отдельно, а кодовый инструмент используйте для сборки.

Не делайте вывод о полной стоимости по длине команды CLI. Сделайте один и тот же восьмисекундный бриф в обоих фреймворках и сравните время до первого MP4, усилия на вторую версию и десять последовательных рендеров.

При масштабировании API — только один этап конвейера

Надёжная система разделяет пять уровней:

задания / материалы / правила бренда
            ↓
Claude API: генерация или правка кода и патчей
            ↓
проверка: schema, allowlist, typecheck, lint, ревью
            ↓
воркеры рендера Remotion или HyperFrames
            ↓
ffprobe / визуальная проверка / хранение / публикация

Нельзя без проверки исполнять ответ модели на рабочем сервере. Ограничьте доступные каталоги, не передавайте секреты в промпт, фиксируйте зависимости, проверяйте новые команды и запускайте сборку в изолированной среде. Для множества независимых задач без немедленного ответа Anthropic предлагает асинхронный Message Batches API. Он генерирует ответы Messages API, но не рендерит видео.

Безопасно введите API Key

Не записывайте ключ в статью, репозиторий или историю команд. В интерактивном Bash:

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

Установите официальный SDK:

python -m pip install anthropic

briefs.json:

[
  {
    "id": "launch-en",
    "brief": "Создай патч для английской версии запуска на основе content/en.json."
  },
  {
    "id": "launch-de",
    "brief": "Создай патч для немецкой версии запуска на основе content/de.json."
  }
]

Скрипт ниже создаёт Batch, опрашивает статус до ended, потоково читает результат и сохраняет его по custom_id. Порядок результатов не обязан совпадать с порядком запросов.

#!/usr/bin/env python3
import json
import time
from pathlib import Path

import anthropic
from anthropic.types.message_create_params import MessageCreateParamsNonStreaming
from anthropic.types.messages.batch_create_params import Request

MODEL = "claude-opus-5-5"
briefs = json.loads(Path("briefs.json").read_text(encoding="utf-8"))
client = anthropic.Anthropic()

requests = []
for item in briefs:
    requests.append(
        Request(
            custom_id=item["id"],
            params=MessageCreateParamsNonStreaming(
                model=MODEL,
                max_tokens=8000,
                system=(
                    "Ты поддерживаешь проект для программно создаваемых видео. "
                    "Верни краткий план реализации и unified diff. "
                    "Не включай секреты и команды, которые скачивают и запускают неизвестный код."
                ),
                messages=[{"role": "user", "content": item["brief"]}],
            ),
        )
    )

batch = client.messages.batches.create(requests=requests)
Path("batch-id.txt").write_text(batch.id, encoding="utf-8")
print(f"создано: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"обрабатывается: {current.request_counts}")
    time.sleep(60)

out_dir = Path("batch-results")
out_dir.mkdir(exist_ok=True)

for result in client.messages.batches.results(batch.id):
    outcome = result.result
    if outcome.type == "succeeded":
        text = "".join(
            block.text for block in outcome.message.content if block.type == "text"
        )
        (out_dir / f"{result.custom_id}.txt").write_text(text, encoding="utf-8")
        print(f"сохранено: {result.custom_id}")
    else:
        print(f"не сохранено: {result.custom_id} -> {outcome.type}")

После проверки и применения патчей CI может рендерить уже доверенные каталоги:

for dir in variants/*; do
  [ -d "$dir" ] || continue
  (
    cd "$dir"
    npm ci
    npx remotion render ProductExplainer \
      "out/$(basename "$dir").mp4" \
      --props=props.json
  )
done

Текущие ограничения Anthropic: до 100 000 запросов или 256 MB в одном Batch — что наступит раньше. Большинство задач заканчивается менее чем за час, но обработка может длиться до 24 часов, после чего незавершённые запросы получают статус expired. Результаты доступны 29 дней с момента создания. Статусы errored, canceled и expired не являются успехом.

Как считать стоимость

Цены ниже проверены 28 сентября 2026 года. Валюта — USD, единица — миллион токенов, точный ID модели в обеих колонках — claude-opus-5-5.

Тип токенов	Anthropic, стандартный API	BetterToken, эффективная стандартная цена	Что считается
Обычный ввод	$4.00	$2.72	Входные токены без чтения из кэша
Вывод	$20.00	$13.60	Сгенерированные моделью токены
Запись кэша на 5 минут	$5.00	$3.40	Первая запись префикса в пятиминутный кэш
Запись кэша на 1 час	$8.00	$5.44	Первая запись префикса в часовой кэш
Чтение/обновление кэша	$0.20	$0.136	Повторное использование сохранённого префикса

В публичной конфигурации BetterToken используется tiered pricing: базовая цена совпадает с таблицей, затем умножается на текущий коэффициент группы Claude 0.68. Поле model_ratio=0 нельзя трактовать как бесплатную модель. Перед запуском снова проверьте страницу цен BetterToken и цены Anthropic.

Формула стандартного синхронного запроса:

model_cost =
  input_tokens / 1,000,000 × input_price
+ output_tokens / 1,000,000 × output_price
+ cache_write_5m_tokens / 1,000,000 × cache_write_5m_price
+ cache_write_1h_tokens / 1,000,000 × cache_write_1h_price
+ cache_read_tokens / 1,000,000 × cache_read_price

Пример: 20 независимых брифов, по 30 000 обычных входных и 8 000 выходных токенов, без кэша:

• Anthropic, стандартные синхронные запросы: 20 × (0.03 × $4 + 0.008 × $20) = $5.60
• Anthropic Batch: скидка 50% на ввод и вывод, примерно $2.80
• BetterToken, эффективная стандартная синхронная цена: 20 × (0.03 × $2.72 + 0.008 × $13.60) = $3.808

Это сравнение стоимости модели при одинаковом числе токенов, а не обещание цены готового ролика. В итог входят повторные попытки, CPU/GPU для рендера, параллельные браузеры, хранение, трафик, производство материалов и ручная проверка.

Где проходит граница BetterToken

BetterToken можно рассматривать как Anthropic-compatible подключение для Claude Code. Текущий Base URL для Claude Code — https://bettertoken.ai; пользователь создаёт собственный аккаунт и ключ, а затем выбирает нужную группу и модель по актуальной документации. Это не подписка Claude.ai или Claude Max.

Наличие /v1/messages не доказывает, что BetterToken совместим с Anthropic Message Batches. Поэтому:

• минимальный процесс Remotion + Claude Code можно оценивать по текущей документации BetterToken;
• пример Batch выше относится только к официальному API Anthropic;
• нельзя просто поменять Base URL в Batch-коде и считать интеграцию поддерживаемой, пока BetterToken не опубликует отдельный контракт, путь, лимиты и правила тарификации.

Для пользователей из России доступны русская документация и оплата в рублях. Конкретные способы оплаты, минимальная сумма, курс, комиссия и срок зачисления определяются тем, что показывает личный кабинет во время платежа.

Чек-лист перед производственным запуском

Контент и дизайн

• В брифе указаны аудитория, цель, длительность, разрешение, FPS и сцены.
• Шрифты, цвета, логотип, безопасная зона и версии скриншотов зафиксированы.
• Длинные локализованные строки проверены в предпросмотре.
• Внешние материалы лицензированы и сохранены локально, временных URL нет.

Код и рендер

• Composition ID, схема props и правила имён стабильны.
• Lock-файл находится в репозитории, CI использует npm ci.
• Успешный предпросмотр не заменяет отдельный CLI-рендер.
• Для ошибки сохраняются команда, props, лог, commit hash и версии окружения.
• Проходят и ffprobe, и визуальная выборочная проверка.

Модель и деньги

• Используется точный ID claude-opus-5-5.
• Ввод, вывод, записи и чтения кэша считаются раздельно.
• Перед Batch один-два синхронных запроса проверяют формат.
• Ответы Batch связываются по custom_id, а не по порядку.
• Расходы модели и инфраструктуры рендера видны отдельно.

Что сделать сейчас

Возьмите один восьмисекундный бриф и соберите его дважды: в Blank-проекте Remotion и в HTML-композиции HyperFrames. Сравните время до первого валидного MP4, объём работы для второй версии и число ошибок в десяти последовательных рендерах. Если выигрывает Remotion — добавляйте props и CI. Если HyperFrames быстрее и команда уверенно поддерживает HTML, React не нужен только ради привычки.

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

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

• Анонс Claude Opus 5.5
• Цены Anthropic на модели и функции
• Anthropic Messages API
• Anthropic Message Batches
• Remotion: видео с coding agents
• Remotion CLI render
• Параметризованный рендер Remotion
• Диагностика ошибок Remotion
• Официальный репозиторий HyperFrames
• Текущие цены BetterToken