Render Remotion

O que Render Remotion faz?

Conduza o loop de renderização e iteração: transforme uma composição em MP4, receba feedback em linguagem natural, faça a menor edição que satisfaça o feedback e re-renderize. O modo de falha dispendioso é o loop oposto - reescrever arquivos de cena inteiros para um pequeno ajuste, ou re-renderizar em qualidade total para cada verificação - o que destrói o trabalho aprovado e a velocidade de iteração que torna o Remotion valioso.

Procedimento operacional

Passo 1: Coletar entradas

• ID da Composição (o id no <Composition> em src/Root.tsx, não um nome de arquivo) e o ponto de entrada (o arquivo que chama registerRoot, geralmente src/index.ts).
• Destino: plataforma/proporção (paisagem 16:9, vertical 9:16, quadrado), resolução (1080p padrão; 4K apenas sob solicitação) e se é necessária transparência.
• Núcleos da máquina (para concorrência) e se é uma renderização única, uma sessão de iteração ou um lote.

Passo 2: A renderização base

npx remotion render src/index.ts <CompositionId> out/video.mp4

A saída padrão é H.264 MP4 na própria largura/altura/fps da composição; o Remotion cria out/ se necessário.

Passo 3: Resolução, fps e predefinições de codec

Resolução e fps residem no <Composition> (width/height/fps) - altere-os na fonte. Use flags apenas para escala e contêiner:

# 1080p paisagem - Composição criada em 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - aumentar a escala do canvas 1080p sem tocar no layout
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 vertical - renderizar uma Composição criada em 1080x1920
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Regras de codec:

• Entrega para redes sociais/web permanece H.264 MP4 (o padrão) - máxima compatibilidade.
• Transparência: --codec=vp8 ou vp9 (WebM), ou --codec=prores com alpha para pipelines de edição. H.264 não pode transportar alpha.
• 60fps reais significa fps={60} na Composição com contagens de quadros escaladas para corresponder - uma alteração de fps apenas com flag dessincroniza todas as animações temporizadas em quadros.

Passo 4: Ajustar concorrência

A renderização é intensiva em CPU (cada quadro é uma captura de tela do Chromium headless). O padrão é aproximadamente metade dos núcleos; o ajuste explícito é a maneira mais fácil de acelerar localmente:

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

Comece com o número de núcleos físicos (--concurrency=50% aceita uma porcentagem); reduza se a máquina começar a usar swap ou sofrer throttling térmico - além do ponto ideal, mais abas do Chromium tornam a renderização mais lenta, não mais rápida.

Passo 5: Executar o loop de refinamento iterativo

Mantenha o Studio aberto (npx remotion studio, http://localhost:3000) para que o usuário visualize instantaneamente; reserve renderizações completas para aprovação final.

1. O usuário visualiza no Studio e dá feedback em linguagem natural.
2. Traduza-o para uma edição cirúrgica - altere apenas o valor relevante:
   • "Muito rápido" → amplie o intervalo de entrada do interpolate ou aumente o damping da mola.
   • "O logotipo deveria aparecer mais" → diminua o damping da mola / adicione overshoot.
   • "Altere o texto do CTA" → edite a prop / defaultProps, não toque em mais nada.
   • "Cor de destaque diferente" → altere um hex no objeto de cores.
   • "Segure o último recurso por mais tempo" → aumente o durationInFrames daquele <Sequence> E recalcule o durationInFrames total da Composição.
3. Re-renderize, ou deixe o Studio recarregar a quente para a verificação visual.

Edição cirúrgica vs reescrita: edite no local quando a mudança for um valor, prop, cor ou temporização de uma cena; reescreva apenas quando a estrutura da cena mudar (adicionar/remover/reordenar cenas - e encaminhe a criação estrutural para remotion-compose). Padrão é cirúrgico: preserva tudo que já foi aprovado.

Passo 6: Variantes em lote

A composição é orientada a dados, então N variantes = N conjuntos de props em um arquivo JSON:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Experimente Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Experimente Globex" } }
]

--props aceita JSON inline ou um caminho de arquivo; para mais do que algumas variantes, escreva um pequeno script Node que leia o JSON e execute um shell para cada entrada, ou use renderMedia() do @remotion/renderer para um loop tipado. Localize ou teste A/B cópia e cores editando apenas o JSON.

Passo 7: Lambda quando o local é o gargalo

Recorra ao Lambda quando uma única renderização levar minutos localmente ou o lote for grande - ele distribui quadros entre workers serverless. Caso contrário, local é mais simples e gratuito.

npx remotion lambda functions deploy            # uma vez por conta/região AWS
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

Requer credenciais AWS e permissões IAM conforme a configuração Lambda do Remotion.

Passo 8: Solucionar as três falhas comuns

1. Incompatibilidade de contagem de quadros - a animação termina antes ou o clipe tem uma cauda morta. Causa: a duração de um <Sequence> mudou, mas o total da Composição não. Correção: faça o total igual à soma de suas sequências; recalcule após cada edição de temporização. Esta é a surpresa #1 na renderização.
2. Referência staticFile() ausente - a renderização falha ou um ativo fica em branco. Causa: um ativo importado por caminho ou fora de public/. Correção: coloque-o em public/assets/ e referencie staticFile("assets/<nome>").
3. Flash/fallback de fonte - o texto renderiza na fonte errada ou desloca. Causa: loadFont() do @remotion/google-fonts ausente ou chamada tarde demais. Correção: chame loadFont() no nível superior do módulo e aplique o fontFamily retornado; a renderização então espera pela fonte.

Entregável

Um arquivo renderizado em out/ na predefinição solicitada, mais - para sessões de iteração - a oferta de loop: nomeie as dimensões ajustáveis (ritmo, texto, cor, temporização) e re-renderize mediante feedback. Para lotes, o JSON de variantes e as saídas por variante.

NÃO FAÇA

• NÃO reescreva um arquivo de cena para uma alteração no nível de valor - edições cirúrgicas preservam o trabalho aprovado.
• NÃO altere fps apenas com flags - defina-o na Composição e reescala as contagens de quadros.
• NÃO altere a duração de uma Sequência sem recalcular o durationInFrames total da Composição.
• NÃO renderize completamente a cada iteração - o hot-reload do Studio é o loop de pré-visualização; renderize na aprovação final.
• NÃO aumente a concorrência além dos núcleos físicos em uma máquina que está fazendo swap ou sofrendo throttling.
• NÃO recorra ao Lambda quando as renderizações locais terminarem em segundos - ele adiciona configuração e custo AWS para nada.
• NÃO crie novas cenas ou reestruture a composição aqui - isso é remotion-compose.

Padrão de qualidade

• A saída é reproduzida na resolução/proporção/fps solicitados, sem cauda morta e sem corte precoce (total da Composição corresponde à soma das sequências).
• Ativos e fontes são renderizados corretamente no primeiro quadro - sem flash de fonte substituta, sem ativos em branco.
• Uma iteração alterou apenas as linhas que o feedback exigia; tudo previamente aprovado permanece intacto.
• As saídas do lote diferem apenas por seus conjuntos de props.

Escalação

Criação de cenas, design de animação e estrutura de componentes vão para remotion-compose; scaffolding do projeto para remotion-setup; pontuação e sincronia de áudio para sound-and-music-sync.