Video Explicativo

Vídeo Explicativo

Transforme uma mensagem em um curta de 30 a 90 segundos, narrado e com ritmo. Execute o pipeline completo: roteiro → storyboard → construção de cenas → sincronização de narração/legendas → edição → polimento, com um sistema de estilo consistente em todo o processo.

Quando usar

• Produzir um vídeo de produto, como funciona, integração ou conceito com duração de 30 a 90 segundos.
• Ir de uma ideia bruta ou funcionalidade para um roteiro, storyboard e peça montada.
• Sincronizar narração com visuais e adicionar legendas para reprodução sem som.

Estrutura da história (decida isso primeiro)

Um vídeo explicativo é um argumento, não um tour de funcionalidades. Antes de qualquer etapa do pipeline, fixe a narrativa para que todas as escolhas posteriores a sirvam.

• Uma ideia central. Uma única frase que o espectador deve ser capaz de repetir depois. Se você não conseguir afirmá-la em uma linha, o vídeo não tem espinha dorsal — reduza o escopo até conseguir. Tudo que não servir àquela ideia é descartado, não reduzido.
• Roteiro primeiro. A narração é a espinha dorsal; os visuais ilustram a linha que está sendo dita, nunca a lideram. Escreva e cronometre as palavras antes de storyboard ou animar — é muito mais barato cortar uma frase do que uma cena construída.
• Ganhe o "como" com riscos. Não pule do problema para o mecanismo. Faça o espectador sentir o custo do problema primeiro; essa tensão é o que o faz assistir à solução.

O arco da história do vídeo explicativo — um batimento por estágio, em ordem:

Estágio	Trabalho narrativo	O que o espectador deve pensar
Problema	Nomeie a dor nas palavras deles	"Sou eu."
Riscos	Mostre o que a dor custa (tempo, dinheiro, risco)	"Preciso disso resolvido."
Solução	Apresente o produto/ideia como a solução, em uma linha	"Ah — isso resolve."
Como funciona	O mecanismo em 1 a 3 passos concretos	"Entendo como faz isso."
Recompensa / CTA	O estado posterior + uma próxima ação	"Quero isso. Vou fazer X."

(A tabela Fórmula do roteiro abaixo mapeia esses estágios para proporções de tempo e orçamentos de palavras — esta seção é o porquê e a ordem; aquela é o quanto tempo.)

Escolha uma analogia e use-a

Mecanismos abstratos são compreendidos quando mapeados para algo que o espectador já conhece. Escolha uma única metáfora e mantenha-a consistente entre as cenas — trocar de analogia no meio do vídeo redefine a compreensão.

• Escolha uma metáfora do mundo do espectador (uma fila, um termostato, uma linha de montagem), não do domínio da engenharia.
• Uma metáfora por vídeo; reuse-a tanto para a gramática visual quanto para a redação da narração.
• Teste-a: se a analogia precisa de sua própria explicação, é a errada.

Ritmo por batimento

O ritmo acompanha a tensão. Avance rapidamente pelo Problema/Riscos para chegar ao valor; desacelere no "como" para que cada etapa seja compreendida; deixe a recompensa respirar.

Batimento	Sensação	Ritmo de corte
Problema / Riscos	Rápido, um pouco tenso	Cortes mais rápidos, pausas curtas
Solução	Um momento de alívio	Uma pausa clara
Como funciona	Deliberado, um passo de cada vez	Mais lento — pause cada etapa para leitura
Recompensa / CTA	Confiante, aberto	Segure o cartão final; um CTA

O pipeline

1. Roteiro — uma mensagem central. Estrutura: problema → solução → como → recompensa. Escreva uma narração enxuta; cronometre-a a ~2,3 palavras/segundo (≈140 ppm). Um vídeo de 60s tem ~138 palavras.
2. Storyboard — uma ideia por cena. Esboce cada quadro mais sua transição; mapeie cada linha da narração para um visual.
3. Construir cenas — anime diagramas/dados, texto cinético/palavras-chave e fundos (técnicas incorporadas abaixo).
4. Narração e legendas — grave/gere a narração, alinhe os cortes de cena aos batimentos da narração, queime as legendas (a maioria das reproduções é sem som).
5. Editar — corte para a narração, segure cada ideia o tempo suficiente para ser compreendida, remova qualquer cena que não avance a mensagem.
6. Polir — correção de cor, atenuação consistente, mixagem de áudio, cartão final.

Fórmula do roteiro

Batimento	Trabalho	Proporção do tempo
Problema	Nomeie a dor que o espectador sente	~20%
Solução	Apresente o produto/ideia como a solução	~15%
Como	Mostre o mecanismo, 1 a 3 passos concretos	~45%
Recompensa	O resultado + um próximo passo claro (CTA)	~20%

Escreva a narração primeiro, em linguagem falada (contrações, frases curtas). Leia em voz alta e cronometre antes de construir qualquer coisa.

Matemática de tempo da narração

• Ritmo: ~2,3 palavras/seg (140 ppm) para narração clara e amigável; linhas técnicas lentas para ~2,0.
• Estime a duração da cena a partir de sua linha de narração: segundos = palavras / 2,3, depois adicione ~0,4s de espaço para respirar.
• Uma cena sem narração (batimento puramente visual) ainda precisa de ≥1,0s para ser registrada.

Técnicas de construção de cenas (incorporadas)

Revelação de diagrama / dados (divulgação progressiva: nós → arestas → rótulos):

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

Palavra-chave cinética (a palavra aparece na sílaba tônica):

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

Estatística com contagem:

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

Renderize a peça montada com Remotion (orientado a dados, determinístico) ou After Effects.

Sincronização de legendas

Legendas são obrigatórias — assuma reprodução automática sem som. Use uma lista de cues .srt/.vtt indexada à narração. Mantenha ≤2 linhas, ≤42 caracteres/linha, na tela por ≥1,0s, desaparecendo antes da próxima linha começar.

1
00:00:00,300 --> 00:00:02,600
Gerenciar lançamentos manualmente é lento.

2
00:00:02,800 --> 00:00:05,400
Shipfast automatiza todo o pipeline.

No Remotion, conduza as legendas a partir do mesmo array de temporização usado para os cortes de cena para que nunca haja deriva.

Consistência do sistema de estilo

Bloqueie uma escala tipográfica, uma gramática de cores (cor = significado, nunca reatribuída) e uma curva de atenuação antes de construir a cena 2. Reutilize as mesmas transições de entrada/saída entre as cenas para que a peça pareça um objeto único, não uma montagem de experimentos. Os visuais devem ilustrar a linha da narração que está sendo dita no momento — mostre, não decore.

Lista de verificação de saída

• Mensagem única e clara; cada cena a avança.
• Narração cronometrada (~2,3 p/s); durações de cena derivadas da narração.
• Storyboard mapeia cada linha da narração para um visual.
• Legendas queimadas/disponíveis; ≤2 linhas, legíveis.
• Sistema de tipo/cor/movimento consistente em todas as cenas.
• Cartão final com um CTA claro.

Entregar e verificar (stills renderizados → MP4)

Utilitário empacotado (scripts/): organize seus stills com scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, depois verifique a codificação com scripts/probe-mp4.sh out.mp4 [LxA] [fps]. Veja scripts/README.md.

O vídeo explicativo montado é uma composição Remotion — determinística por quadro, portanto qualquer quadro exato é renderizado sem necessidade de busca. Use este nível quando a entrega for um MP4/GIF que contenha narração incorporada e legendas queimadas; para uma única cena web, entregue HTML independente.

Contrato de saída:

• Um projeto Remotion com a composição registrada (<Composition> + schema zod + defaultProps), todo movimento orientado a quadros (sem temporizadores/Date.now()/Math.random()).
• Entrega = o out/*.mp4 renderizado (mais o projeto, para que narração/roteiro/dados possam ser re-renderizados).
• Narração via <Audio src={staticFile()}>; temporização da narração/cena incorporada nas props (sem áudio em tempo real na renderização). Legendas conduzidas a partir desse mesmo array de temporização para que nunca haja deriva.
• Duração dependente de dados? Calcule-a em calculateMetadata, não manualmente.

Loop de verificação — renderizar stills → inspecionar → codificar. Renderize quadros individuais primeiro (baratos, sem codificação), inspecione-os, codifique apenas quando os quadros estiverem corretos.

# Stills exatos por quadro no início / meio / fim — renderize com as props ENVIADAS, não apenas as padrão
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# Inspecione: roteiro→storyboard→cena mapeia para os quadros — amostre um quadro DENTRO da pausa de CADA cena,
# confirme que a linha de narração e a legenda estão sincronizadas com o visual naquele quadro, sem estouro de texto / fora da tela.

# Somente depois que os stills estiverem corretos, codifique:
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions lê durationInFrames/fps para escolher o quadro final e os quadros de pausa por cena.
• GIF demo do README de graça: npx remotion render Explainer out/demo.gif --codec=gif.

Antes de finalizar:

1. npx remotion still renderiza corretamente no quadro 0, um quadro dentro de cada pausa de cena e no último — sem erros, sem ativos/fontes ausentes.
2. Em cada quadro de cena amostrado, a legenda e a linha de narração falada correspondem ao visual na tela (sem deriva).
3. As legendas estão dentro das áreas seguras, ≤2 linhas, legíveis; o texto é exato e não cortado.
4. Apenas orientado a quadros — sem Date.now() / Math.random() / temporizadores; as props enviadas renderizam corretamente (não apenas defaultProps).
5. MP4 completo codificado e reproduzido com narração; (opcional) GIF renderizado para o README.

Arquivos de referência

• references/script-to-screen-workflow.md — detalhe completo do pipeline: a fórmula de roteiro problema→solução→como→recompensa com um exemplo prático e orçamento de palavras, tabelas de tempo de narração, um modelo de storyboard para preencher com timecodes, uma lista de verificação de construção por cena, orientação de autoria de legendas (VTT/SRT) e uma folha de especificações do sistema de estilo para consistência entre cenas.