Uerdong/remotion-explainer-video

Animação Explicativa em Chinês (Fluxo Completo Remotion)

Siga as dez etapas em ordem. O produto de cada etapa é a entrada da próxima. É proibido pular etapas e depois retornar para preencher lacunas.

Dez Regras de Ouro

1. A duração é determinada pela narração, não pelo roteiro. O roteiro de referência é apenas uma intenção. Primeiro, estime a duração total com base na velocidade real de fala (TTS chinês ~3,3 caracteres/segundo); se exceder a duração alvo, comprima o texto e adapte para linguagem coloquial, depois sintetize e meça a duração real de cada segmento.
2. O BPM deve ser medido, não confiado em números fornecidos pelo usuário ou materiais de referência. O librosa frequentemente relata 104 BPM como 51,7 (dividido pela metade). Use autocorrelação ou parâmetros de onset independentes para verificar novamente e adote o valor que corresponda à percepção auditiva.
3. Todos os pontos de corte devem ser alinhados aos beats. Limite do parágrafo = momento de término da narração do parágrafo alinhado para cima ao beat mais próximo; número do quadro = round(beat * (60/BPM) * FPS), codificado diretamente no código, sem cálculo em tempo de execução.
4. Renderização determinística. Proibido Date.now(), Math.random(); toda animação deve ser derivada de Math.sin(frame); a mesma quadro deve ser renderizado de forma idêntica em qualquer execução.
5. Fonte única de verdade para a linha do tempo. Parágrafos, números de quadro, deslocamentos de narração, quadros fixos de efeitos sonoros existem apenas em um timeline.ts; alterar o número de caracteres do roteiro → executar novamente o script de geração → sincronizar com o TS, nunca editar manualmente em dois lugares.
6. Quebra de legendas por pontuação. Primeiro, divida por ，；：。 em cláusulas, depois agrupe em caixas; use um container de largura fixa para a largura da linha (ex.: width: 1460 + whiteSpace: "pre"), proibido usar maxWidth para deixar o conteúdo determinar o container.
7. Separação de três camadas de áudio: BGM, voz, efeitos sonoros com níveis independentes; voz em 0,8, BGM em 0,24 como ponto de partida; após a renderização, meça o pico real; >0,95 indica risco de clipping.
8. Renderize quadros estáticos para verificação de cada cena. Use npx remotion still para ver a composição quadro a quadro; renderizar o vídeo completo antes de ver é equivalente a refazer.
9. Três restrições rígidas no Windows: --props deve ser passado como arquivo (--props=props-nobgm.json), JSON inline será quebrado pelo shell; ffmpeg 9 use -fps_mode passthrough em vez de -vsync; se o estilo não for atualizado após modificar TSX, exclua primeiro node_modules\.cache.
10. Entregue primeiro, depois avalie. O vídeo já renderizado e as imagens já geradas devem ser entregues ao usuário como estão; problemas apenas registrados e explicados, não regerados sem autorização.

Pipeline de Dez Etapas

#	Etapa	Ação Chave	Produto
1	Desconstrução do Tópico	Definir cadeia de conhecimento, duração alvo, proporção de tela, tom do público	Frase de tópico + acordo de duração/proporção
2	Roteiro Explicativo	Comprimir para o número alvo de palavras no formato "gancho → modelo → derivação → conclusão → lição", adaptar para linguagem coloquial	Roteiro segmentado (~6 segmentos, 50–70 caracteres cada)
3	Narração	Sintetizar cada segmento independentemente, mesmo timbre e parâmetros; medir duração real e f0 de cada segmento	s1..sn.wav + tabela de duração dos segmentos
4	Legendas	Gerar SRT a partir da duração dos segmentos, mesma fonte dos pontos de corte da imagem	subtitles.srt
5	BGM	Selecionar faixa ou sintetizar, medir BPM real e tabela de beats; substituir se inadequado	bgm.wav + bgm.json (beats_sec)
6	Reorganização da Linha do Tempo	Alinhar limites dos segmentos aos beats, calcular quadro total	timeline.json + timeline.ts
7	Efeitos Sonoros	Atribuir timbres a ações-chave, sintetizar no código, fixar nos beats	sfx/*.wav + tabela de quadros fixos
8	Engenharia Visual	theme / components / timeline + componentes de cena para cada segmento	Projeto Remotion
9	Verificação e Renderização	Quadro estático de cada segmento → filme completo → medir pico	out/*.mp4, QA de quadros estáticos
10	Materiais de Publicação	Capa (renderizada por código ou ferramenta de design), título, descrição, tópicos	Imagem de capa + publication-copy.md

Decisões de Tratamento de Conflitos

Conflito	Tratamento
Número de caracteres do roteiro vs. duração alvo	Comprima o roteiro, não altere a duração. Se a taxa de compressão > 1,3, adapte para frases curtas coloquiais, mantendo todo o conhecimento
BPM/duração fornecida pelo usuário vs. medição real	Siga a medição real e informe ativamente a diferença (ex.: "Especificação diz 110 BPM / 58s, medição real 104 BPM / 53,65s"), ofereça opção "reorganizar conforme especificação"
Estilo de faixa especificada pelo usuário não corresponde	Primeiro meça o BPM/espectro/pico real da faixa e forneça dados; depois sintetize uma alternativa; divulgue o motivo do desvio na entrega
Referência visual vs. estilo de capa ou plataforma conflitantes	Separe os dois: mantenha a referência visual do usuário para o conteúdo; para a capa, siga a lógica de comunicação da plataforma de capa e explique a escolha

Lista de Entregáveis

• Duas versões do vídeo final: com BGM / sem BGM (para plataformas com biblioteca de música própria); mesmo número de quadros e duração
• Legendas SRT (podem ser externas, consistentes com as incorporadas no vídeo)
• Documento de entrega: tabela de vídeos finais, BPM e método de beat, tabela de limites de segmentos, tabela de pontos de beat, roteiro, tabela de efeitos sonoros, níveis de mixagem, estrutura do projeto, comandos de execução
• Capa (horizontal + vertical para plataforma alvo), múltiplas opções de título, múltiplas versões de descrição, tags de tópico

Arquivos de Referência

• Comandos, parâmetros, métodos de verificação e caminhos dos produtos de cada etapa: references/pipeline.md
• Modelos adequados para cada etapa e justificativa de seleção: references/models.md
• Esqueleto do projeto, convenções de theme/components/timeline, fórmula de alinhamento de beats, armadilhas de renderização: references/remotion-conventions.md
• Reformatação visual de vídeos existentes (fundo branco e plano → estilo cinematográfico escuro, etc.): references/restyle-playbook.md