Vídeo explicativo: acabamento Remotion, capa e export verificado

Produção Remotion

Construa vídeos Remotion como renderizadores determinísticos de quadros. Trate geometria de assets, ancoragem visual, temporização da linha do tempo e verificação da mídia final como preocupações separadas.

Roteie a tarefa

• Para extração de sprite-sheets, sangria de quadros, assuntos descentralizados, arte truncada ou loops não naturais, leia references/sprite-sheets.md.
• Para estrutura de composição, temporização de cenas, painéis de coordenadas ao vivo ou design de transições, leia references/scene-architecture.md.
• Para uma capa de abertura no vídeo, composição de miniatura autônoma, finalização com marca ou quadro final, leia references/covers-and-endings.md.
• Para carregamento de assets, áudio, falhas de delayRender, renderizações com falta de memória ou verificação de exportação, leia references/rendering-and-audio.md.
• Para prompts de imagem de capa, direção de miniatura, descrições de vídeos curtos ou hashtags de publicação, leia references/publishing-copy.md.

Leia apenas as referências relevantes para a solicitação. Inspecione a versão instalada do Remotion antes de escolher as importações, pois projetos mais antigos podem expor componentes de mídia de remotion, enquanto projetos atuais usam @remotion/media.

Fluxo de produção

1. Estabeleça o contrato de renderização

Inspecione o projeto existente antes de editar. Registre:

• ID da composição, largura, altura, FPS e duração;
• limites das cenas e se os quadros são globais ou locais de uma Sequence;
• dimensões do asset de origem, transparência, metadados dos quadros e duração do áudio;
• codec de saída necessário, destino e recursos de renderização disponíveis;
• se as entregas incluem uma cena de capa de abertura, imagem de capa autônoma, cartão de finalização, áudio audível, silêncio intencional ou cópia de publicação.

Preserve as alterações não relacionadas na árvore de trabalho. Prefira uma pequena alteração direcionada em vez de reestruturar um projeto funcional.

2. Modele o tempo explicitamente

Defina durações de cena e quadros de corte como constantes ou dados nomeados. Derive o estado da animação de useCurrentFrame() e useVideoConfig().

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

Use interpolate() com intervalos clampados para movimento contínuo. Não use transições CSS, keyframes CSS, timers de parede, valores aleatórios ou estado de reprodução mutável para animação renderizada.

3. Separe a geometria de origem da apresentação

Mantenha retângulos de corte, ordem de animação, limites de conteúdo e âncoras visuais em dados tipados. Faça com que componentes de renderização consumam esses dados em vez de duplicar coordenadas em CSS ou labels.

Use o mesmo objeto de quadro atual computado para:

• o corte visível;
• contadores de quadro e células destacadas;
• painéis JSON/coordenadas;
• legendas que descrevem o quadro ativo.

Isso evita uma animação correta com uma UI explicativa desatualizada.

Ao mostrar uma tira de filme, gere uma janela que contenha o quadro atual exato. Não destaque o quadro amostrado mais próximo enquanto renderiza um corte diferente.

4. Estabilize o assunto principal

Use um viewport fixo para a animação. Recorte o retângulo de origem exato primeiro, depois traduza esse quadro recortado dentro do viewport usando uma âncora visual por quadro ou caixa de conteúdo visível. Não centralize apenas o retângulo bruto da célula quando a arte se deslocar dentro das células.

Para sprite sheets, verifique cada quadro de borda e qualquer quadro contendo extremidades longas, como caudas, cabelos, sombras ou rastros de movimento. Siga o fluxo de trabalho detalhado em references/sprite-sheets.md.

5. Construa continuidade de cena

Dê à composição um fundo base opaco persistente fora de todas as sequências de cena. Os fundos de cena também podem permanecer opacos. Aplique transições como sobreposições orientadas por quadros acima das cenas e abaixo de qualquer vinheta final ou sobreposição de segurança.

Mantenha os efeitos decorativos subordinados à explicação. Uma transição deve ocultar um corte, não revelar transparência, tabuleiros de xadrez, células de sprite vizinhas ou conteúdo não montado.

Quando a solicitação incluir uma capa ou finalização, implemente-os como cenas de primeira classe e renderize uma composição de capa autônoma quando útil. Siga references/covers-and-endings.md. Não substitua um prompt de geração de capa por uma capa Remotion real, a menos que o usuário tenha solicitado apenas um prompt.

6. Adicione e misture áudio

Referencie áudio local com staticFile(). Cubra a composição completa escolhendo uma faixa suficientemente longa, fazendo loop intencionalmente ou cortando intencionalmente. Para uma faixa longa fornecida pelo usuário, inspecione sua duração, silêncio e volume e, em seguida, coloque apenas o trecho necessário em public/audio/. Escolha um limite musicalmente natural em vez de confiar apenas no volume.

Use um callback de volume baseado em quadros para fades e mantenha a música de fundo baixa o suficiente para narração ou texto instrutivo. Evite gravar fades no trecho quando o Remotion já possui o envelope de volume.

Não declare o áudio completo apenas com a visualização do Studio. Verifique se o arquivo exportado contém um fluxo de áudio mensuravelmente não silencioso.

7. Valide em escopo crescente

Execute as verificações nesta ordem:

1. Verifique os tipos do projeto.
2. Renderize imagens estáticas na capa, em ambos os lados de cada corte, quadros de sprite representativos, na entrada da finalização e no quadro final.
3. Renderize a composição completa.
4. Se o Chrome esgotar a RAM ou o disco temporário, reduza a concorrência de renderização antes de alterar o código do aplicativo.
5. Inspecione o contêiner final quanto à duração, fluxo de vídeo e fluxo de áudio necessário.

Use o verificador integrado após a exportação:

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

Considere uma saída parcial ou com falha como inválida, mesmo que um arquivo exista no destino.

8. Prepare cópia de publicação quando solicitado

Baseie prompts de capa e descrições de vídeo na composição final, assunto verificado, pontos de ensino, estilo visual, duração e público. Produza essas entregas diretamente na conversa do usuário. Não crie arquivos de prompt ou descrição, chame uma ferramenta de geração de imagem ou gere uma imagem de capa, a menos que o usuário solicite explicitamente essas ações.

Siga references/publishing-copy.md. Torne o resultado pronto para copiar, conciso para a plataforma alvo e escrito no idioma do usuário.

Padrão de conclusão

Não reivindique conclusão até que:

• a animação seja derivada deterministicamente dos quadros;
• os limites do assunto permaneçam completos e visualmente estáveis durante todo o loop;
• as coordenadas explicativas sejam atualizadas com o quadro de sprite renderizado;
• os cortes de cena nunca exponham artefatos transparentes ou de tabuleiro de xadrez;
• os assets de mídia carreguem sem alças de renderização vazadas;
• uma renderização completa seja bem-sucedida em uma concorrência estável;
• o arquivo exportado tenha a duração esperada, os fluxos de áudio/vídeo necessários e áudio não silencioso quando a música for solicitada.
• as cenas de capa e finalização solicitadas sejam visualmente verificadas no estado completo, nos limites da transição e no quadro final;
• a arte de capa autônoma inclua seu próprio fundo opaco e corresponda à hierarquia do vídeo;
• os prompts de capa e descrições de publicação solicitados reflitam com precisão o vídeo final e sejam entregues diretamente na conversa.

Relate o caminho de saída, o comando de renderização, o resultado da verificação e qualquer concorrência intencionalmente reduzida.