Vídeo de demonstração web
Transforme um aplicativo web funcional em um MP4 de 20 a 60 segundos. A tela é sempre o aplicativo real; legendas, cursor e efeitos são camadas sobrepostas. Use apenas dados fictícios.
Kit de ferramentas: starter/ ao lado deste arquivo. Copie-o para o projeto do usuário (por exemplo, video/), execute npm install lá e escreva scripts de cena usando-o. Exemplo prático no repositório: examples/sample-tasks/.
1. Escolha o estilo primeiro
| O vídeo é... | Estilo | Por quê |
|---|---|---|
| Como usar um recurso (guias, onboarding, respostas de suporte) | Walkthrough: grave a interface real sendo clicada | Os espectadores copiam os passos, então eles devem ver o fluxo real e não editado em um ritmo legível |
| Por que o produto vale a pena (lançamento, página inicial, anúncios, visão geral) | Promo animado: anime sobre capturas de tela | Os espectadores não estão acompanhando; o vídeo precisa conectar ações a resultados e manter a atenção |
Não os misture em um único vídeo. Um tutorial com objetos voadores é difícil de acompanhar; um promo feito de gravação simples parece longo.
Detalhes: walkthrough em references/walkthrough.md, promo animado em references/motion.md.
2. Acorde antes de renderizar
Renderizar é a etapa cara. Antes de escrever código de cena, crie um storyboard (references/storyboard.md) e obtenha a aprovação do usuário sobre:
- Estilo (walkthrough ou promo) e quem assiste
- Duração e número de cenas
- Tamanho de saída (padrão 2560x1440 a 30 fps; 1080x1920 para vertical)
- Marca: cores, fonte, logotipo, nome do produto e palavras que não devem aparecer
- Dados: quais nomes e números fictícios aparecem na tela (nunca clientes reais)
- Narração ou silencioso
- Para onde o arquivo vai quando estiver pronto
Um storyboard tem uma coluna de Movimento além de Tela e Legenda (promo) para que cada cena use um tipo diferente de movimento de propósito.
3. Construa
Walkthrough
- Primeiro, teste o fluxo: um script que clica sem gravar, para corrigir seletores e esperas
- Grave em partes (uma página ou passo por parte) com
lib/recorder.mjs, depois junte comconcatParts - Escreva legendas com references/copy.md
Promo animado
- Capture cada estado da interface com
lib/capture.mjs(capturas de tela com 3840 de largura + posições dos elementos) - Componha cenas no Remotion com
motion/parts.tsx(câmera, cursor, legendas, chips, contagens numéricas) - Verifique imagens em quadros-chave (
remotion still ... --frame=N --scale=0.25) antes de uma renderização completa
Narração: nenhuma ferramenta está incluída. Se o usuário quiser uma, recomende o Gemini 3.1 Flash TTS (gemini-3.1-flash-tts-preview) com a voz Charon.
4. Verifique antes de entregar
Execute node lib/qa.mjs out/video.mp4 --sheet 16 --end e observe ambas as imagens. Detalhes: references/qa.md.
- Tamanho, fps e duração correspondem ao storyboard
- Nenhuma legenda cortada ou cobrindo o botão sendo clicado
- Nenhum diálogo meio aberto, quadro em branco ou logotipo de carregamento tardio (verifique o último segundo separadamente)
- Cada número que anima termina no valor que a tela real mostra
- Ao entregar, diga quais partes são efeitos encenados (um documento voando, uma contagem) e quais são o produto realmente funcionando
5. Regras rígidas
- Interface real, dados fictícios. Sem nomes reais de clientes, pessoas ou empresas, IDs, e-mails ou números na tela, em legendas, em nomes de arquivos ou na descrição
- Não publique (YouTube, redes sociais, site) sem a aprovação explícita do usuário para esse upload
- Não afirme o que o produto não faz. Se uma etapa for falsificada para filmagem (uma resposta de servidor, um upload), a legenda não deve apresentá-la como mágica automática
- Mantenha as fontes de renderização (scripts, storyboard) no repositório; mantenha MP4s e capturas de tela fora do git