sangbiaolaoda-arch/remotion-srt-workflow

Fluxo de Trabalho Remotion para Animação SRT

Transforme um script SRT (roteiro de locução) em um vídeo animado 2D renderizado com Remotion. Este fluxo foi totalmente validado em um projeto real com 81 falas / 193 segundos / 35 cenas (incluindo 12 renderizações, 11 bugs reais detectados pelos gates de validação).

Quando Usar

• O usuário fornece um SRT / script / texto de locução e deseja um "vídeo explicativo com imagens"
• Você já tem um projeto Remotion e precisa adicionar ou modificar uma cena
• Você está revisando a qualidade final de um projeto Remotion de outra pessoa

Princípios Essenciais (violar = fracasso)

1. Limite de Evidências: Não invente operações já executadas. As conclusões são divididas em três categorias: "fato verificado / sugestão de design / item não verificado".
2. Não Pule Gates: Cada fase termina com um gate G; não prossiga sem confirmação do usuário. Quando o usuário disser "continue", isso autoriza o gate atual.
3. Entregue de Uma Vez: Se o usuário pedir explicitamente uma entrega contínua ("Você não pode fazer tudo de uma vez?"), renderize as cenas restantes de uma só vez, com os gates de validação atuando automaticamente — não divida em múltiplas rodadas de espera.
4. Determinismo de Quadros: A linha do tempo deve usar apenas quadros. É proibido usar CSS animation/transition/@keyframes/Tailwind animate-*, setTimeout para controlar o tempo; Random deve ter semente fixa.
5. Espaçamento de Texto por Caixa de Linha: Fontes chinesas (Noto Serif SC etc.) têm caixa de linha ≈1.44em. Texto que visualmente não se sobrepõe pode, na prática, se sobrepor. Deixe uma margem de ≥0.3em entre blocos de texto e ≥1.55em para texto vertical.
6. Texto sem Pontuação: Pontuação do SRT deve ser substituída por espaços na camada de renderização; não peça ao autor para modificar o arquivo fonte.

Visão Geral do Fluxo

Fase	Entregável	Gate
S0	Avaliação de Viabilidade (classificação / caminho técnico / tabela de riscos / lacunas no Brief), sem código ou assets	G0 — Usuário define caminho
S1	Inicialização do projeto: npm instalar Remotion全家桶, fontes em public/fonts/, tsconfig, Root	—
S2	brief.md + beat-sheet.md (falas→cenas, limites de quadro derivados do SRT) + style-guide.md + 3 styleframes renderizados	G1 — Direção visual
S3	assets.md — planejamento de assets (lista de elementos gráficos + parâmetros + riscos; priorizar 100% SVG programático, zero terceirização)	G2 — Confirmação de mesclagem
S4	storyboard.md — storyboard cena por cena (limites de quadro / visual principal / movimento principal / motivo da transição / âncora de verificação de áudio mudo)	G3 — Confirmação de mesclagem
S5	Fatia Vertical: selecionar 3–4 cenas com maior densidade de dados, renderizar e fazer QA de quadros	G4 — Amostra
S6	Renderizar todas as cenas (pode ser de uma vez), cada cena passa pelo gate de validação	—
S7	Renderização completa + validação em cinco níveis + entrega	G5 — QA → G6

Arquivos de estado devem ser sempre salvos em disco (brief / beat-sheet / style-guide / assets / storyboard / progress / findings). Tarefas longas usam os arquivos como fonte única da verdade.

Manual Detalhado (consulte conforme necessário)

• references/workflow.md — Detalhes operacionais de cada fase, métodos de recálculo numérico, padrões de verificação de referências
• references/qa-gates.md — Princípios do gate de sobreposição, quadros pretos, contato impressão, comandos de quadros, regras de intervalo de renderização
• references/remotion-rules.md — Regras rígidas do Remotion e problemas reais encontrados neste projeto (quadros pretos entre cenas, carregamento de fontes, posicionamento absoluto etc.)
• assets/OverlapAudit.tsx — Camada de auditoria de sobreposição de texto quadro a quadro; pode ser copiada diretamente para o projeto e montada no topo da Composition principal

Início Rápido de Novo Projeto (10 minutos)

1. npm i remotion @remotion/cli @remotion/bundler react react-dom typescript (+ @remotion/renderer)
2. Fonte chinesa: cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/ (fonte variável em arquivo único cobre todos os pesos, licença SIL OFL, uso comercial permitido). Use staticFile() + FontFace + delayRender/continueRender para carregamento local; proibido usar Google Fonts online.
3. Copie assets/OverlapAudit.tsx para src/audit/ e monte no topo da Composition principal.
4. Siga a fase S2 para criar o beat-sheet e escreva os limites de quadro na única fonte da verdade src/acts/acts.ts.

Comandos de Renderização (verificados localmente)

npx remotion render src/index.ts Main out.mp4 --codec h264 --crf 18 --frames=START-END --log=error
npx remotion still src/index.ts Main out.png --frame=N          # Verificação de quadro único
npx remotion browser ensure                                     # Download inicial do Headless Shell

Referência de velocidade de renderização: animações complexas em 1080p ≈17–27fps (5810 quadros em aproximadamente 3–6 minutos).