Claude Opus 5.5 e Remotion: fluxo completo para criar vídeos de produto com código

Conclusão prática: Claude Opus 5.5 com Remotion é uma boa escolha para vídeos explicativos de produto, animações de interface, demonstrações de código, gráficos, lançamentos e templates reutilizáveis. O Opus 5.5 interpreta o briefing e escreve ou corrige o projeto React/TypeScript; o Remotion renderiza o código quadro a quadro. Nenhum deles é um modelo de vídeo por difusão, portanto um prompt não devolve sozinho um MP4 fotorrealista.

Quando o valor principal estiver em atores, locações realistas, câmera cinematográfica ou imagens que não possam ser descritas com segurança por código, produza esses ativos separadamente. Depois use Remotion ou HyperFrames para títulos, legendas, transições, identidade visual e montagem repetível.

Este guia segue a documentação oficial atual. O sinal de sucesso é um MP4 realmente renderizado e verificado na sua máquina ou no CI; não usamos demonstrações não confirmadas, tempo fixo ou um custo universal por vídeo.

Escolha em um minuto

Necessidade	Melhor ponto de partida	Motivo
Tour de produto, UI, código ou dados	Remotion	Ecossistema React, compositions, props e render maduro
Motion graphics HTML/CSS e handoff simples por agente	HyperFrames	Autoria em HTML sem exigir React
Muitos vídeos a partir de um template	Qualquer um	Ambos são determinísticos quando o conteúdo vira parâmetro
Pessoas, cenários e linguagem cinematográfica realistas	Etapa separada de mídia	Código não substitui a geração ou filmagem desses quadros
Um vídeo curto sem reaproveitamento	Protótipo mínimo	Uma plataforma de lotes pode ser exagero

A pergunta decisiva é: os quadros podem ser descritos por código, arquivos, dados e tempo? Quanto mais o vídeo se parecer com site, apresentação, dashboard, editor de código, legendas ou animação de marca, melhor o encaixe.

O papel do Claude Opus 5.5

A Anthropic lançou Claude Opus 5.5 em 22 de setembro de 2026. O ID exato da API é claude-opus-5-5. Neste fluxo ele pode:

1. Transformar briefing em cenas, componentes, tempos e critérios de aceite.
2. Editar vários arquivos de um projeto Remotion ou HyperFrames.
3. Trocar conteúdo fixo por props, JSON e manifestos.
4. Executar checks, preview e render e corrigir a causa dos logs.
5. Manter regras visuais entre variantes.

O limite precisa ficar claro: a saída do modelo é texto, código ou patch, não o MP4 final. O render acontece no computador, runner de CI, servidor ou infraestrutura de render. Tokens do modelo e custos de CPU, Chrome, FFmpeg, armazenamento e tráfego são contas separadas.

Defina o briefing antes do prompt

Crie brief.md com um resultado verificável:

# Brief do vídeo

- Objetivo: explicar como uma pessoa cria uma chave de API e envia a primeira requisição.
- Público: desenvolvedores avaliando o produto pela primeira vez.
- Formato: 1920x1080, 30 fps, 8 segundos, sem áudio.
- Composition ID: ProductExplainer
- Cenas:
  1. Problema e promessa, 0–2 s
  2. Fluxo do produto em três etapas, 2–6 s
  3. Resultado final e CTA, 6–8 s
- Entradas: productName, headline, steps, accentColor, caminhos das capturas
- Restrições: usar apenas assets locais; não fazer requisições de rede durante o render.
- Aceite:
  - O texto permanece dentro das margens seguras.
  - Não há erros no console.
  - A composição é renderizada em MP4 pela CLI.
  - Uma segunda variação pode ser renderizada mudando apenas props.json.

Resolução, FPS, duração, Composition ID, caminhos, política de rede e comando de validação devem ser entradas, não suposições do agente.

Projeto mínimo Remotion pela rota oficial

Com Node.js e Claude Code instalados, execute:

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

Em outro terminal:

cd my-video
claude

Peça primeiro uma única composition de oito segundos sem dependência remota:

Leia brief.md e inspecione o projeto Remotion existente antes de editar.
Crie uma composição com o ID exato ProductExplainer.
Use 1920x1080, 30 fps e 240 frames.
Monte um vídeo explicativo limpo de três cenas usando apenas React, CSS e SVG inline.
A composição deve aceitar productName, headline, steps e accentColor como props,
com valores padrão adequados para a prévia no Studio.
Mantenha todo o texto dentro de uma margem segura de 120px. Não busque assets remotos durante o render.
Use APIs do Remotion baseadas em frames para que cada frame seja determinístico.
Ao terminar, informe os arquivos alterados, o comando de prévia e o comando exato de render.
Não declare sucesso a menos que o comando de render termine com código 0.

ID estável facilita automação; animação baseada em frames mantém reprodutibilidade; ativos locais eliminam CORS e falhas de rede na primeira prova.

Preview, render e verificação

Confirme ProductExplainer no Remotion Studio e rode:

npx remotion render ProductExplainer out/product-explainer.mp4

O mínimo está pronto apenas quando o comando termina com código 0, o MP4 existe e toca, não há texto cortado, frames vazios, ativos ausentes ou exceções, e uma segunda variante funciona apenas alterando props.

Valide metadados:

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

Parametrize o template

Crie props.json:

{
  "productName": "Acme API",
  "headline": "Sua primeira requisição em três etapas",
  "steps": [
    "Crie uma chave de API",
    "Escolha um modelo",
    "Envie a requisição"
  ],
  "accentColor": "#6D5EF9"
}

Renderize:

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

O Remotion alerta que JSON inline pode perder aspas em shells do Windows; prefira arquivo. Para idiomas, preserve uma única composition:

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

Componentes controlam visual e animação, arquivos de conteúdo controlam textos e ativos, e o manifesto liga locale, props e saída.

Depure o render na ordem certa

Ative logs detalhados:

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

Se a concorrência repetir logs:

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

Depois verifique ID exato, props padrão antes do JSON, remoção progressiva de componentes, diferenças do Chrome headless, carregamento de fontes e mídia, espera assíncrona e registro completo do comando, props, commit, erro causal e ambiente. Ao pedir nova correção ao agente, envie a primeira causa e exija o menor patch seguido do mesmo comando de validação.

Remotion, HyperFrames ou vídeo por difusão

HyperFrames é um framework open source da HeyGen orientado a HTML. Ele renderiza HTML, CSS, mídia e animações seekable em MP4 determinístico:

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

O README atual exige Node.js 22+ e FFmpeg e aceita GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI e adaptadores próprios.

Critério	Remotion	HyperFrames	Difusão
Autoria	React/TypeScript	HTML/CSS/JS	Prompts de texto, imagem ou vídeo
Reprodutibilidade	Alta com entradas fixas	Alta por design	Menor
Melhor uso	UI, código, dados e templates	Motion web e handoff de agentes	Pessoas e cenários realistas
Parâmetros	props, dados, componentes	data attributes, HTML, scripts	Controles do modelo e mídia
Custos	Engenharia e render	Engenharia e render	Geração e pós-produção

Escolha Remotion para equipes React e templates complexos. Experimente HyperFrames quando um index.html claro for suficiente. Para filmagem realista, crie a mídia separadamente e faça a montagem com um dos dois.

Em lote, a API é apenas uma etapa

Arquitetura recomendada:

briefs / assets / regras de marca
            ↓
Claude API: gerar ou revisar código e patches
            ↓
validação: schema, allowlist, typecheck, lint, revisão
            ↓
workers de render do Remotion ou HyperFrames
            ↓
ffprobe / revisão visual / armazenamento / publicação

Não execute a resposta do modelo diretamente em produção. Restrinja diretórios, não inclua segredos, fixe dependências, revise comandos e use isolamento. O Message Batches API processa requests do Messages API de forma assíncrona; não é fila de render.

Leia a chave sem imprimi-la:

read -rs ANTHROPIC_API_KEY
export ANTHROPIC_API_KEY
printf '\n'

python -m pip install anthropic

briefs.json:

[
  {
    "id": "launch-en",
    "brief": "Crie um patch para a variação em inglês usando content/en.json."
  },
  {
    "id": "launch-de",
    "brief": "Crie um patch para a variação em alemão usando content/de.json."
  }
]

Script completo:

#!/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=(
                    "Você mantém um projeto de vídeo gerado por código. "
                    "Retorne um plano de implementação conciso e um unified diff. "
                    "Não inclua segredos nem comandos que baixem e executem código desconhecido."
                ),
                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"criado: {batch.id}")

while True:
    current = client.messages.batches.retrieve(batch.id)
    if current.processing_status == "ended":
        break
    print(f"processando: {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"salvo: {result.custom_id}")
    else:
        print(f"não salvo: {result.custom_id} -> {outcome.type}")

Depois de revisar os patches, renderize diretórios validados:

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

O limite atual é 100.000 requests ou 256 MB por Batch. A maioria termina em menos de uma hora, mas pode durar 24 horas; resultados ficam disponíveis por 29 dias. Una respostas por custom_id e trate errored, canceled e expired como falhas.

Estime custo por classe de token

Valores verificados em 28 de setembro de 2026, USD por milhão de tokens, modelo exato claude-opus-5-5:

Item	Anthropic padrão	BetterToken efetivo padrão	Definição
Entrada normal	$4.00	$2.72	Entrada sem cache
Saída	$20.00	$13.60	Tokens gerados
Gravação cache 5 min	$5.00	$3.40	Primeira gravação do prefixo
Gravação cache 1 h	$8.00	$5.44	Primeira gravação de uma hora
Leitura/refresh de cache	$0.20	$0.136	Reutilização do prefixo

A configuração pública da BetterToken usa preços-base por faixa multiplicados pelo fator atual do grupo Claude 0.68; model_ratio=0 não significa grátis. Consulte BetterToken Pricing e Anthropic Pricing novamente antes de usar.

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

Para 20 briefings com 30.000 tokens de entrada e 8.000 de saída cada, sem cache:

• Anthropic síncrono padrão: $5.60
• Anthropic Batch com 50% de desconto em entrada e saída: cerca de $2.80
• BetterToken síncrono no preço efetivo padrão: $3.808

Isso compara só o modelo. Não inclui tentativas, CPU/GPU, Chrome, armazenamento, tráfego, produção de mídia ou revisão humana.

Limite da BetterToken neste fluxo

BetterToken pode ser avaliada como rota Anthropic-compatible para Claude Code. O Base URL atual é https://bettertoken.ai; o usuário cria conta e API Key próprias. Não é assinatura Claude.ai ou Claude Max.

O suporte público a /v1/messages não prova que o BetterToken seja compatível com Message Batches. Portanto, o exemplo de Batch acima usa somente a API oficial da Anthropic. Não troque apenas o Base URL até que a BetterToken publique contrato, endpoint, limites e cobrança específicos.

Na Rússia, há documentação em russo e pagamento em rublos; métodos, mínimo, câmbio, taxas e prazo são os exibidos pelo console no momento do pagamento.

Checklist antes de escalar

• Briefing com objetivo, público, formato, cenas e aceite.
• Ativos locais e licenciados; fontes e screenshots fixos.
• Uma composition parametrizada, conteúdo separado por idioma.
• Lock file versionado e npm ci no CI.
• Render CLI, ffprobe e revisão visual aprovados.
• Falhas registradas com comando, props, log, commit e ambiente.
• Modelo exato claude-opus-5-5.
• Entrada, saída e cache medidos separadamente.
• Um ou dois requests síncronos antes do Batch.
• Resultado associado por custom_id.
• Custos de modelo e render separados.

Próximo passo

Faça o mesmo briefing de oito segundos uma vez no Remotion e uma vez no HyperFrames. Compare tempo até o primeiro MP4 válido, esforço para a segunda versão e falhas em dez renders seguidos. Só então escolha, parametrize e automatize.

Primeiro prove um vídeo reproduzível, verificável e parametrizado. Depois escalar para cem variantes será uma decisão baseada em evidência.

Fontes oficiais

• Claude Opus 5.5
• Preços da Anthropic
• Anthropic Messages API
• Anthropic Message Batches
• Remotion com coding agents
• Remotion CLI render
• Render parametrizado do Remotion
• Depuração de render do Remotion
• Repositório oficial HyperFrames
• Preços atuais da BetterToken