Innate-Labs/product-demo-video

Product Demo Video (Vídeo de Demonstração de Produto)

Transforme um web app real em um vídeo de demonstração com estilo: screenshots reais + interfaces reconstruídas a partir do código, montadas em um mockup de navegador, com legendas, logotipo, música e renderizado como um vídeo curto vertical/quadrado.

É automático — você só precisa fornecer um projeto funcional. O Claude irá:

• Entender o produto automaticamente: ler CLAUDE.md / README / rotas para compreender o propósito de cada página e a identidade do produto.
• Gerar texto a partir da leitura do código: com base na funcionalidade real de cada página, criar automaticamente títulos/ subtítulos para as legendas e a barra de endereço, sem necessidade de escrever manualmente.
• Localizar o logotipo automaticamente: encontrar o logotipo vetorial real do seu projeto em public/ e usá-lo na abertura e no encerramento.

Você só precisa tomar decisões em alguns pontos-chave (proporção da tela, quais páginas incluir, ritmo, som).

Pré-requisito: esta skill depende de remotion-best-practices (framework de vídeo) e agent-browser (screenshots). Antes de manipular o código Remotion, carregue o remotion-best-practices para obter conhecimento do domínio.

Quando usar

Quando o usuário deseja transformar um web app funcional (seu próprio projeto ou um diretório fornecido) em um vídeo curto de demonstração/promoção. Exemplo típico: "Crie um vídeo de demonstração para o nosso produto", "Transforme esta página em um vídeo promocional vertical".

Formato do resultado

Um projeto Remotion que renderiza um mp4:

• Canvas: Vertical 1280×1706 (3:4, padrão, ideal para redes sociais) / Quadrado 1080×1080 / Horizontal 1920×1080
• Estrutura: N cenas, cada cena = uma página do produto (screenshot real ou reconstruída a partir do código) dentro de um mockup de navegador, com legendas na parte inferior; transições crossfade entre cenas + movimento Ken Burns lento na janela inteira; encerramento com o logotipo da marca e slogan
• Som: Música de fundo livre de direitos autorais (padrão) ou narração TTS (opcional)

Fluxo completo (5 fases)

Fase 1 — Conhecer o produto e planejar a narrativa

1. Leia o CLAUDE.md / README.md / DESIGN.md do projeto para entender: qual é o produto, quais são as páginas/funcionalidades principais, as diretrizes de estilo (cores/fontes/restrições — veja reference/tone.md, que deve ser seguido em conjunto com o DESIGN.md do projeto).
2. Liste as rotas das páginas (find app -name page.tsx), entenda a função de cada página e deduza automaticamente uma linha narrativa de "jornada do usuário" (ex.: "Funcionalidade principal A → B → C → Página de resultados"), gerando automaticamente o texto das legendas para cada etapa.
3. Confirme com o usuário: proporção da tela, quais etapas incluir, ritmo, opção de som. Sinalize antecipadamente páginas que não podem ser capturadas com screenshot real (páginas em tempo real / que exigem dados especiais).

Fase 2 — Capturar páginas reais (priorizar as que podem ser capturadas)

Use agent-browser. Consulte scripts/capture-pages.md. Pontos importantes:

• Inicie o front-end e o back-end do projeto alvo (em segundo plano) e aguarde até que estejam prontos.
• Defina o viewport padrão: agent-browser set viewport 1440 900 2 (@2x retina, 16:10 proporção normal de navegador, screenshots nítidos).
• Lidar com login: a maioria das páginas (app) requer login. Encontre uma conta de teste no dev.db. A senha é um hash; com autorização do usuário, use a função de hash do próprio projeto para redefini-la temporariamente (após a captura, é obrigatório restaurar o valor original — veja as lições aprendidas).
• Remover badges de desenvolvimento: agent-browser eval "document.querySelectorAll('nextjs-portal').forEach(e=>e.remove())".
• Capture uma imagem limpa de cada página alvo e salve no projeto Remotion em public/<brand>/.

Fase 3 — Reconstruir a partir do código as páginas que não podem ser capturadas (ponto crítico de qualidade)

Algumas páginas não podem ser capturadas com screenshot real (sala de entrevista por voz em tempo real sem headset, página de relatório que depende do backend, dados ausentes). Não invente interfaces imaginárias —

1. Leia o código real dos componentes (components/.../XxxLayout.tsx, etc.) para entender o layout real, os elementos e a estrutura de dados.
2. Reconstrua fielmente 1:1 a estrutura real como um componente React dentro do Remotion, renderizando na área de conteúdo da janela (dimensões = W×H da área de conteúdo do mockup).
3. Exemplos em templates/screens/InterviewScreen.tsx (interface de sessão) e templates/screens/ReportScreen.tsx (interface de relatório) — são modelos neutros para "reconstrução a partir do código real". Ao trocar de produto, use a mesma abordagem e reescreva com o conteúdo real do seu produto.

Fase 4 — Montar o vídeo de demonstração

Use templates/PromoVideo.tsx como esqueleto (mockup de navegador + crossfade de cenas + Ken Burns + legendas + Outro + áudio) e templates/PromoRoot.tsx para registrar a composição.

• Cada cena é configurada como { type: 'image'|'<custom>', src?, addr, title, sub }.
• A barra de endereço muda conforme a cena (aumenta o realismo).
• Localize e use automaticamente o logotipo real do projeto no topo e no encerramento (procure em public/ por icons/logo.svg ou outros arquivos vetoriais de logotipo; não use texto simples para falsificar).
• Siga rigorosamente as diretrizes de estilo (veja abaixo).

Fase 5 — Som e renderização

• Música de fundo (padrão): música livre de direitos autorais da Mixkit, adequada para uso comercial. Use scripts/get-bgm.sh para baixar e permitir que o usuário ouça e escolha. A música toca por todo o vídeo, com fade in/fade out no início e no final.
• Narração TTS (opcional): scripts/gen-tts.sh, usa AiHubMix/OpenAI compatível com /audio/speech (gpt-4o-mini-tts, qualidade realista; requer a chave do usuário). Cada frase é alinhada à sua cena; a duração da cena é ajustada ao comprimento da narração. Não use say do macOS (voz robótica, baixa qualidade).
• Renderização: npx remotion render <id> out/<name>.mp4. Verifique se há trilha de áudio + duração e copie para ~/Desktop/.

Tom — Diretrizes de estilo (isso é crucial para o toque "minimalista profissional" — veja detalhes em reference/tone.md)

Tom padrão = contido, profissional, real. A menos que o DESIGN.md do projeto exija o contrário:

• Cores: Fundo branco (#F4F4F6 para o canvas / #FFF para a janela) + texto em preto e cinza (#141414 / #8A8A90), sem cores chamativas; pontos vermelhos funcionais (gravação/conexão) devem ser mantidos como no original.
• Fontes: Unificar chinês e inglês com PingFang ("PingFang SC","Heiti SC",sans-serif); disponível diretamente em Macs usados para renderização; não use Inter (fallback inconsistente para chinês).
• Mockup de navegador: Janela branca com bordas arredondadas de 18px + barra de título no topo com três pontos cinzas (não use bolinhas coloridas de semáforo) + barra de endereço em formato pill, com sombra suave.
• Movimento de câmera: Transições suaves uniformes com Easing.bezier(0.16,1,0.3,1); janela aparece com spring; movimento Ken Burns lento em toda a janela com escala de 1→1.03 (aplicado à janela, não à imagem interna, para não cortar o conteúdo).
• Ritmo: Duração uniforme das cenas (padrão 60 quadros/2s a 30fps), ritmo constante; para sincronizar com a música, meça o BPM e alinhe aos compassos.
• Legendas: Centralizadas na parte inferior, título em PingFang Semibold grande + subtítulo em cinza pequeno, com crossfade.
• Sem emojis.

Lista de proibições (não fazer): Uso excessivo de cores, bolinhas coloridas de semáforo, Inter com texto em chinês, objectFit: cover que amplia e corta o conteúdo da página, inventar páginas que não puderam ser capturadas, TTS robótico, ritmo inconsistente, logotipo falso em texto simples.

Lições aprendidas (obrigatório ler)

• Navegador headless não tem microfone/câmera: Páginas de voz/vídeo em tempo real podem travar em "Preparando / Dispositivo indisponível", impossibilitando a captura — vá direto para a reconstrução a partir do código, não insista.
• Schema do banco de dados local pode estar dessincronizado: O código pode ter migrações que o banco local não executou, causando erros 500 (ex.: no such column: xxx). Para screenshots / preenchimento de dados, você pode executar ALTER TABLE ADD COLUMN para adicionar as colunas ausentes (seguro, não deleta dados), mas documente a alteração.
• Modificações no banco de dados local devem ser revertidas: Senhas de teste redefinidas e dados de exemplo preenchidos temporariamente devem ser restaurados aos valores originais após a captura (faça backup do hash/JSON original primeiro). As colunas adicionadas podem ser mantidas (já que o código as espera).
• objectFit não deve cortar conteúdo: Ao colocar screenshots na janela, use objectFit:"contain" para exibir a imagem inteira; o zoom do Ken Burns deve ser aplicado na janela externa, não na imagem, para evitar cortar a parte inferior da página.
• Ao preencher dados de exemplo, confirme os nomes dos campos no código: Os nomes dos campos lidos pelo front-end geralmente diferem da intuição (plural, snake_case, etc.). É obrigatório ler o componente de renderização para confirmar, não adivinhe.
• Texto em chinês com aspas duplas ASCII → use crases para toda a string (regra global do CLAUDE.md).
• O cwd do Bash persiste entre chamadas: Use caminhos absolutos, não repita cd subdiretório.

Verificação rápida

Após alterar o código Remotion: npx tsc --noEmit; renderize um quadro-chave com npx remotion still <id> out/check.png --frame=N --scale=0.5 para verificação visual; após a renderização final, use ffprobe para confirmar a trilha de áudio e a duração.