demo-video — URL→Remotion launch

Habilidade de Criação de Vídeo de Demonstração

Crie um vídeo de demonstração de produto refinado a partir de uma URL da empresa ou ativos do produto. A saída padrão é um vídeo de 60 a 90 segundos em 1080p+; renderize em 4K quando a máquina, os ativos e o destino de entrega suportarem.

Padrão Operacional

• Baseie o vídeo na superfície real do produto: páginas da web, telas de aplicativos, fluxos de trabalho logados, capturas de tela, ativos fornecidos pelo usuário ou demonstrações públicas verificadas.
• Trate a entrada apenas de URL como suficiente para começar. Infira o produto, público, fluxo de trabalho principal e sistema de marca a partir do site, depois pergunte apenas sobre acesso ausente ou preferências de alto impacto.
• Prefira a narrativa de gerente de produto em vez de marketing genérico. Mostre qual problema o usuário tem, o que eles fazem dentro do produto, o que muda na tela e por que o resultado é importante.
• Use Remotion para composição de movimento quando prático e FFmpeg para inspeção, codificação, folhas de contato, manipulação de áudio e conversão para entrega.
• Mantenha as afirmações defensáveis. Não invente métricas, logotipos de clientes, resultados de detectores, integrações, status de conformidade ou preços a menos que verificados a partir do material de origem.
• Evite superajuste a um cliente anterior. Reutilize o fluxo de trabalho, portões de qualidade e padrões de movimento; não reutilize capturas de tela, cópia, cores, preços, personas ou correções versão por versão específicas do cliente.

Entradas

Se o usuário fornecer apenas uma URL do site:

1. Abra o site em um navegador, mapeie a navegação, proposta de valor, páginas do produto, preços, documentos de ajuda e estados interativos visíveis.
2. Capture capturas de tela de alta resolução das páginas e superfícies de UI que melhor explicam o produto.
3. Construa uma narrativa em torno do ciclo de produto mais forte descoberto no site.
4. Declare qualquer limite de acesso se uma área logada do produto for necessária.

Se o usuário fornecer mais contexto, use-o para aumentar a qualidade:

• Público-alvo, plataforma de campanha, proporção de aspecto, duração preferida, CTA, meta de lançamento.
• Etapas do fluxo de trabalho do produto, acesso à conta de demonstração, entradas de amostra ou saída esperada de antes/depois.
• Ativos da marca, capturas de tela, referências de vídeo, fontes, direção musical, alegações proibidas e notas legais.

Roteamento de Referência

• Leia references/capture-workflow.md antes da pesquisa no navegador, captura logada ou trabalho de captura de tela.
• Leia references/storytelling.md antes de escrever o roteiro, storyboard, lista de tomadas ou narrativa do produto.
• Leia references/visual-system.md antes de escolher linguagem de movimento, tipografia, transições, layout ou música.
• Leia references/remotion-ffmpeg.md antes de implementar o projeto de vídeo ou renderizar arquivos.
• Leia references/qc-checklist.md antes de considerar o vídeo completo.

Fluxo de Trabalho de Produção

1. Escopo do entregável

   • Confirme a duração alvo, proporção de aspecto, resolução, idioma e plataforma de entrega quando disponível.
   • Padrão para 16:9, 60-90 segundos, 30fps, H.264 MP4, mínimo de 1080p.
   • Use 4K quando solicitado ou quando o vídeo for usado para lançamento, investidor, conferência ou distribuição de anúncios pagos.

2. Pesquise o produto

   • Navegue pelo site e páginas do produto profundamente o suficiente para identificar o ciclo principal, não apenas a promessa da página inicial.
   • Construa um mapa rápido de recursos: usuário principal, ponto problemático, ação primária, saída visível do produto, prova, CTA.
   • Se o produto estiver atrás de login, use a sessão ativa do navegador do usuário ou peça para ele fazer login, depois continue a partir da UI autenticada.

3. Capture evidências do produto

   • Capture capturas de tela do desktop em escala de dispositivo 2x ou superior quando possível.
   • Capture estados preenchidos e vazios se eles explicarem a transformação.
   • Nomeie os ativos por cena e estado, como dashboard-empty.png, workflow-result.png, pricing.png.
   • Mantenha um manifesto com URL, título da página, hora da captura, viewport, nome do arquivo e notas.

4. Escreva a história do produto

   • Abra com o problema do usuário ou resultado desejado em linguagem simples.
   • Percorra o ciclo do produto nesta ordem: configuração, ação, transformação, revisão/prova, fluxo de trabalho mais amplo, CTA.
   • Mantenha o texto curto o suficiente para um vídeo em movimento. Use legendas como âncoras, não parágrafos.
   • Use uma cópia de som nativo para o público; evite frases genéricas de IA como "desbloqueie produtividade", a menos que o produto genuinamente diga isso.

5. Projete o sistema de movimento

   • Use as cores reais e a tipografia da marca como base, depois adicione uma fonte de exibição contida ou face de destaque se melhorar a hierarquia.
   • Use capturas de tela do produto como os ativos principais. Adicione molduras de navegador, caminhos de cursor, zooms, máscaras, linhas de varredura, painéis de comparação ou tipografia cinética apenas quando eles esclarecerem o fluxo de trabalho.
   • Escolha transições que correspondam ao produto: líquido/ondulação para transformação fluida, varredura para análise, holofote para prova, empurrão espacial para navegação, comparação dividida para antes/depois.
   • Mantenha o movimento contínuo. As mudanças de cena devem parecer que a câmera ou interface está se movendo através de uma história de produto, não slides separados.

6. Construa e renderize

   • Use o modelo inicial em assets/remotion-starter/ quando um scaffold de projeto for útil.
   • Renderize stills de revisão ou uma folha de contato antes de renderizar o vídeo final.
   • Renderize 1080p primeiro para QA, depois 4K final, se solicitado.
   • Use FFmpeg ou ffprobe para verificar duração, resolução, codec, taxa de quadros e fluxo de áudio.

7. QA antes da entrega

   • Verifique se nenhum texto se sobrepõe, corta estranhamente ou se torna ilegível em cortes rápidos.
   • Verifique se botões, cursores, balões e máscaras estão alinhados com a UI subjacente.
   • Verifique se todas as capturas de tela estão nítidas o suficiente na escala final.
   • Verifique se a música é instrumental, segura quanto a direitos e balanceada sob qualquer narração ou SFX.
   • Forneça o MP4 final mais artefatos de produção úteis: storyboard, manifesto de ativos, folha de contato e projeto fonte quando relevante.

Scripts Reutilizáveis

• scripts/create_demo_brief.py cria um briefing estruturado a partir de uma URL e contexto opcional do produto.
• scripts/qc_video.py inspeciona metadados de vídeo final com ffprobe e sinaliza problemas de resolução, duração, codec e áudio.
• scripts/make_contact_sheet.py cria uma folha de contato visual com FFmpeg para revisão rápida.

Execute scripts de uma pasta de projeto ou com caminhos absolutos. Eles são ajudantes, não um substituto para o julgamento visual.

Modelo Inicial

Copie assets/remotion-starter/ para o projeto de trabalho ao iniciar um novo vídeo. Substitua a configuração de espaço reservado em src/demoConfig.ts, adicione capturas de tela em public/ ou ativos estáticos do Remotion e adapte as cenas à narrativa do produto.

O modelo inicial é intencionalmente genérico:

• Inclui uma composição de história de produto com cenas de abertura, fluxo de trabalho, prova e CTA.
• Usa espaços reais para capturas de tela, mas recai para espaços reservados de UI limpos.
• Inclui primitivas de movimento para fades, zooms, movimento de trilho, ênfase de cursor e painéis de comparação.
• Evita cópia, cores ou ativos específicos do cliente.

Barra de Conclusão

Não considere o vídeo finalizado até que estas condições sejam verdadeiras:

• A história do produto é derivada de evidências reais do produto.
• A renderização final é de pelo menos 1080p, ou o usuário aceitou explicitamente um alvo inferior.
• O vídeo foi inspecionado visualmente através de stills, renderização de visualização ou folha de contato.
• Os metadados do FFmpeg/ffprobe confirmam resolução, duração, codec de vídeo e estado de áudio.
• Qualquer licenciamento ou limite de origem para música, fontes, filmagens de arquivo ou páginas de terceiros está documentado.
• O usuário recebe um arquivo de vídeo concreto, não apenas um plano ou roteiro.