Renderização Remotion

O que Renderização Remotion faz?

Impulsione o ciclo de renderização-e-iteração: transforme uma composição em MP4, receba feedback em linguagem natural, faça a menor edição que o satisfaça e renderize novamente. O modo de falha caro é o loop oposto — reescrever arquivos de cena inteiros para um ajuste de cópia, 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

Etapa 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 chamando registerRoot, tipicamente src/index.ts).
• Alvo: plataforma/aspecto (paisagem 16:9, vertical 9:16, quadrado), resolução (1080p padrão; 4K apenas sob solicitação), e se transparência é necessária.
• Núcleos da máquina (para concorrência) e se é uma renderização, uma sessão de iteração ou um lote.

Etapa 2: A renderização base

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

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

Etapa 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:

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

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

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

Regras de codec:

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

Etapa 4: Ajustar concorrência

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

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 estiver fazendo swap ou limitando termicamente — além do ponto ideal, mais abas do Chromium tornam a renderização mais lenta, não mais rápida.

Etapa 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 as renderizações completas para aprovação final.

1. O usuário visualiza no Studio e dá feedback em linguagem simples.
2. Traduza 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 spring.
   • "O logotipo deve aparecer mais" → diminua o damping da spring / adicione overshoot.
   • "Altere o texto do CTA" → edite a prop / defaultProps, não toque em mais nada.
   • "Cor de destaque diferente" → mude um hex no objeto de cores.
   • "Segure o último recurso por mais tempo" → aumente o durationInFrames daquele <Sequence> E recálcule o durationInFrames total da Composição.
3. Re-renderize, ou deixe o Studio recarregar a quente para 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 direcione a criação estrutural para remotion-compose). Padrão: cirúrgico — preserva tudo que já foi aprovado.

Etapa 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": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props aceita JSON inline ou um caminho de arquivo; para mais de algumas variantes, escreva um pequeno script Node que leia o JSON e execute comandos externos por entrada, ou use @remotion/renderer's renderMedia() para um loop tipado. Localize ou faça A/B de cópia e cores inteiramente editando o JSON.

Etapa 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 AWS/região
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.

Etapa 8: Solucionar as três falhas comuns

1. Incompatibilidade de contagem de quadros — animação corta cedo 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 #1 surpresa de 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 muda. Causa: loadFont() de @remotion/google-fonts ausente ou chamado 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 com base no 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 mudança a nível de valor — edições cirúrgicas preservam o trabalho aprovado.
• NÃO altere o fps apenas via flags — defina-o na Composição e reescalone as contagens de quadros.
• NÃO altere a duração de uma Sequência sem recálcular o durationInFrames total da Composição.
• NÃO renderize completamente a cada iteração — o hot-reload do Studio é o loop de 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 limitando termicamente.
• NÃO recorra ao Lambda quando as renderizações locais terminam em segundos — adiciona configuração AWS e custo por nada.
• NÃO crie novas cenas ou reestruture a composição aqui — isso é tarefa do remotion-compose.

Padrão de qualidade

• A saída é reproduzida na resolução/aspecto/fps solicitados, sem cauda morta e sem corte precoce (o total da Composição corresponde à soma das sequências).
• Ativos e fontes renderizam corretamente no primeiro quadro — sem flash de fonte de fallback, 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 de projeto para remotion-setup; pontuação e temporização de áudio para sound-and-music-sync.