Aryanban/vídeo-de-demo-de-produto-saas

Vídeo de demonstração de produto SaaS

Construa um curto filme de produto no Remotion, cortado no ritmo da sua trilha sonora, com a própria marca do produto, a partir das telas reais do produto. O mesmo fluxo cobre demos horizontais, reels verticais, filmes com camadas de b-roll, produtos sem interface para gravar, e um filme que já existe e precisa de uma onda de alterações.

Um reel genérico de motion graphics é fácil de fazer e fácil de ignorar, e o mesmo vale para aquele feito por IA que os proprietários agora reconhecem de imediato. O que diferencia um filme desses é reunido antes de qualquer cena existir: os ativos e telas reais do produto, um visual emprestado de filmes de referência que o usuário gosta, uma grade temporal extraída da trilha sonora e um argumento visual que o filme faz. O resto desta skill é o trabalho artesanal construído sobre isso.

Comece no branch correto

• Um novo filme. Coleta, visual, estrutura, batidas, briefing, o checkpoint, a construção: o fluxo abaixo, com a fundamentação em references/workflow.md.
• Um filme existente. Leia docs/video/notes.md (primeiro todas as entradas "decision"), o briefing e a última entrega, inspecione o render aceito e a fonte separadamente, e classifique a solicitação antes de tocar em qualquer coisa: um ajuste vai atrás de uma chave, uma reformulação mantém cada tempo e movimento, uma reconstrução ganha um storyboard ou bancos de teste. references/iteration-playbook.md, "Classifique a solicitação primeiro". Não repita a coleta nem reabra o visual para uma pequena correção.
• Apenas crítica ou planejamento. Revise o render (references/self-check.md, references/taste-review.md) e retorne uma lista ranqueada; não construa nada. Diga em quais evidências cada descoberta se baseia: um still, uma medição ou a reprodução, que você não pode fazer.
• Narração define o ritmo. A estrutura é liderada pela música. Um filme cortado para uma narração coloca seus eventos manualmente (BEAT_SYNCED = false no arquivo de temporização) e o briefing diz que os cortes não se assentarão na música; diga isso antes de começar.

Definição de pronto

• Um projeto Remotion com uma composição mestre e uma composição de debug por cena; toda alteração candidata atrás de uma chave cujo padrão é o visual enviado.
• docs/video/brief.md: as entradas, o visual, o argumento visual em uma frase, o script cena por cena, as suposições.
• beats.json e um arquivo de temporização que cada cena lê seus frames, para que alterar um índice de batida reflua o filme.
• Um MP4 HD (1920x1080 ou 1080x1920), com tag de cor, um still de miniatura e um render 4K na aceitação do proprietário que carrega o áudio do HD.
• Cada cena verificada por você em stills renderizados antes de o usuário vê-la; as palavras contadas; o proprietário informado sobre o que foi medido e que ninguém assistiu.
• docs/video/notes.md com cada onda e cada decisão, e um arquivo de entrega quando a sessão termina com trabalho em aberto.
• Opcionalmente, quatro a oito efeitos sonoros atrás da prop sfx do mestre, medidos em seus eventos, com um render Master-NoSfx ao lado do mestre para que o usuário escolha de ouvido.

O fluxo

1. Configuração. Verifique as ferramentas e anote o que está faltando. references/setup.md
2. Coleta. Envie o questionário como uma única mensagem e registre as respostas; capture o site de hoje, não a memória. references/asset-intake.md, references/product-ui-from-site.md
3. Visual e argumento. Detalhe dois ou três vídeos de referência em verbos de transição, ritmo e movimentos característicos; escreva a frase única que o filme argumenta e o movimento característico único. references/reference-video-vibe.md, references/creative-direction.md
4. Estrutura. Copie assets/scaffold/ para o projeto e instale. references/project-scaffold.md
5. Batidas. Execute scripts/detect-beats.py na trilha sonora, escrevendo beats.json sobre o placeholder da estrutura, e aja com base em seu veredito de confiabilidade. references/beat-sync.md
6. Briefing e primeiras cenas. Escreva docs/video/brief.md, construa a cena 1 e a primeira cena que mostra o produto, verifique-as em stills, então pare no checkpoint abaixo.
7. Construção completa. Construa as cenas restantes e o mestre, verificando cada uma em stills, contando as palavras, executando a passagem de atenção. Em seguida, a camada de som, se o filme ganhar uma: references/sound-effects.md, antes da primeira onda de correções, para que cada cue se assente em um frame que parou de se mover.
8. Ondas de correção e envio. Colete as notas do usuário em lotes, corrija atrás de chaves, renderize com as flags do mestre, exporte. Uma cena que o usuário quer repensada recebe duas a quatro direções como bancos de teste com a música, mostradas lado a lado e em tamanho real, e o usuário escolhe. Uma onda que reconstrói a história ganha um storyboard primeiro (todas as strings na tela e uma linha por frame), aprovado antes de qualquer código. Termine uma sessão longa com um arquivo de entrega. references/iteration-playbook.md, references/render-export.md, assets/prompt-templates/handoff.md

Um checkpoint

Pare para a aprovação do usuário exatamente uma vez antes da construção completa: quando a cena de abertura e a primeira cena do produto estiverem renderizadas, com o corte entre elas e a música, e o briefing estiver escrito. Mostre esse clipe e o script do briefing juntos, e pergunte três coisas: o visual está certo, as palavras estão certas, e se move bem com a música.

O clipe precisa de ambos os tipos de cena porque eles falham de maneiras diferentes. Uma abertura liderada por tipografia mostra o visual. Uma cena de produto mostra quanto está na tela e como os eventos se assentam na batida, e essas são as coisas que um usuário rejeita após uma construção completa se as vir lá pela primeira vez. Quando o usuário for revisar mais tarde, uma pequena página HTML local com o vídeo ao lado do script coloca ambos em um só lugar; assets/prompt-templates/checkpoint.html é um ponto de partida.

A razão para uma única parada, colocada aqui: as pessoas julgam um render muito melhor do que um documento, e um visual ou ritmo errado pego agora custa duas cenas de retrabalho em vez do filme inteiro. Tudo antes do checkpoint é reversível, então faça sem pedir aprovação em documentos. Faça as perguntas da coleta em uma mensagem, tome uma decisão sensata sempre que o usuário não tiver preferência, e escreva cada escolha na lista de suposições do briefing para que seja fácil vetar. Após o checkpoint, construa o filme inteiro antes de pedir notas novamente. Um ajuste dentro de uma sensação aprovada não precisa de segundo checkpoint; uma mudança de sensação, sim.

Se ninguém estiver lá para responder (uma execução não supervisionada), responda à coleta a partir dos materiais que lhe foram dados, liste cada suposição no briefing, e ainda assim pare no checkpoint. Um filme inteiro construído sobre um visual não aprovado é o erro caro que esta parada existe para prevenir. A única exceção é um briefing de entrega que diga em palavras para renderizar o checkpoint e continuar: então renderize-o, abra-o para o usuário e continue construindo, porque uma sessão que para sem ninguém para responder não entrega nada.

O visual de template é o inimigo

Os proprietários nomeiam em uma palavra ("claudesque", "Canva", "barato") e é um conjunto de padrões: uma tela creme com uma serifa, brilhos e bolhas, uma palavra em itálico ou colorida em um título, rótulos de sobrancelha, diagramas hub-and-spoke, glifos clip-art, um dashboard inventado quando o real está no site, um truque por cena, algo pulando em cada batida, movimento de flutuação ociosa, texto que aparece gradualmente e fica parado. Cada hexadecimal pode vir do arquivo de marca e o filme ainda assim parece mais um deles. A lista completa, o que substituiu cada item em um filme que foi enviado, e a regra do movimento característico único estão em references/creative-direction.md, "O que parece um template". Leia antes da primeira cena e novamente antes de qualquer passagem "mais premium".

Um filme pode limpar essa lista e ainda parecer uma apresentação de slides limpa: o mesmo título sobre uma laje, nenhum mundo compartilhado, nenhum arco tonal, o acento em tudo. Quando duas passagens de polimento seguidas resultam em "melhor, mas ainda não está lá", pare de mexer no movimento e execute uma crítica de direção de arte às cegas nos stills (references/iteration-playbook.md, "Quando as passagens de polimento estabilizam"). No filme de onde veio, a resposta foi um mundo 3D compartilhado, o tom carregando o enredo, tipografia como composição e um acento por frame (references/creative-direction.md, references/3d-world.md).

O frame de corte carrega uma imagem

Cada corte cai em um backbeat, e o frame em que cai tem que estar composto: o card com sua primeira linha, a barra ou o título, não um retângulo vazio que preenche ao longo das próximas batidas. Um elemento composto é suficiente: com o card lá no corte, o título ao lado pode subir em uma batida. Primeiros rascunhos e agentes de cena colocam a primeira linha na primeira batida após o corte, e então um filme abre seis cenas seguidas em branco. A regra, o truque de pré-rolagem para contadores e campos de chip, e os movimentos de câmera que unem as cenas estão em references/animation-patterns.md.

O movimento continua através do corte, e o texto se move em uma direção

Duas notas de proprietários que gostaram de um filme no geral: "menos solavancos" e "movimento de texto é chato". A primeira veio de transições que paravam completamente em ambos os lados de cada corte e de movimentos de câmera que faziam todo o seu movimento no primeiro meio segundo; a correção é uma saída que acelera até o corte, uma entrada que o deixa em velocidade, e movimentos que derivam uniformemente. A segunda veio de títulos que apareciam gradualmente e ficavam parados; a correção é um movimento para todo o texto de exibição, escolhido das referências e usado em cada cena, entrando em uma batida e saindo da maneira que a câmera sai, não um novo truque por cena. assets/components/Stage.tsx implementa o primeiro; Title.tsx implementa um movimento de texto; references/animation-patterns.md tem os números, incluindo as chaves de um grande empurrão no espaço logarítmico e como um objeto é passado através de um corte.

Uma região de mudança de cada vez: dentro de meio segundo, nada se move em um canto distante enquanto o evento principal da cena se estabelece. Coloque o elemento secundário onde o olho já está, ou no corte (references/motion-language.md).

Mostre a ideia, não a tela

Um filme de produto não é um tutorial. Cada cena de produto carrega uma ideia, e seu card mostra apenas o que faz essa ideia funcionar: um nome, um status, uma frase. O orçamento, a partir de filmes que seus proprietários gostaram: cerca de 4 palavras por segundo de duração, 15 a 30 palavras em um card de produto, títulos com menos de 12 palavras e em uma linha. Um corte com o dobro disso atraiu "muito texto". A redação real do produto é de onde vêm as poucas palavras que você mantém; não é uma razão para mantê-las todas. Deixe de fora preços, créditos e nomes de planos, a menos que o usuário peça. scripts/check-copy.mjs conta; references/writing-style.md tem as regras e os sinais.

Verifique seus próprios renders

Antes de o usuário ver uma cena, renderize stills nos frames que importam e olhe para eles: cada frame de clique, o frame onde a linha mais longa de texto está totalmente na tela, o último frame antes de cada corte, o frame de corte inteiro. Confirme que a ponta do cursor está em seu alvo, nenhum texto quebra ou é cortado, nada sai da área segura, e as palavras correspondem exatamente ao briefing. Após um render mestre: a folha de contato, as tiras de corte, o relatório de solavancos com os movimentos julgados do filme aprovados conforme planejado, e a passagem de atenção. references/self-check.md tem a lista de frames e os comandos.

Isso é importante porque as falhas comuns de um filme como este (um cursor que erra seu botão, um título que quebra, um card que fica fora da grade, um dump de temporização que ficou obsoleto) todas passam pela verificação de tipo e renderizam sem erro. Elas são visíveis apenas na imagem, ou em um número.

Stills não mostram movimento. Se o filme parece suave e se encaixa bem com sua música é algo que apenas uma pessoa assistindo pode dizer, então nunca o relate como verificado; diga o que foi medido e que ninguém assistiu.

As três entradas

Ativos. Proporção de aspecto, duração, logotipo, cores da marca, fontes, o script e uma trilha sonora, coletados antecipadamente com o questionário em assets/prompt-templates/asset-intake-questionnaire.md. Um filme com movimento forte e marca placeholder parece um template, e todo ativo que chega atrasado força um re-render. A IU real do produto é capturada do site de hoje e medida do DOM, nunca desenhada de memória (references/product-ui-from-site.md); um dashboard inventado afundou uma versão inteira. Se o usuário não tiver script, references/script-development.md desenvolve um com ele.

Visual. Dois ou três vídeos de referência que o usuário gosta, cada um transformado em uma análise de diretor: lista de planos, verbos de transição (empurrão, whip-pan, zoom de corte correspondente, wipe de máscara), ritmo, tipografia, movimentos característicos. Os verbos de transição são a parte que mais importa, porque transformam uma lista de cenas em um plano de câmera em vez de uma apresentação de slides com fades. Um filme anterior que o usuário gostou supera todas as referências: carregue seus pontos de corte e tempos de entrada primeiro. Use o Gemini quando disponível, ou amostre frames e leia-os você mesmo; ambos os caminhos estão em references/reference-video-vibe.md.

Batidas. scripts/detect-beats.py lê a trilha sonora e escreve beats.json: o tempo, o frame de cada batida, quais batidas são backbeats, e onde a faixa se eleva. Cortes de cena vão nas batidas, por padrão em backbeats, o que faz um corte parecer um golpe de bateria; os três filmes de referência que pareciam caros tinham 10 a 13 cortes por minuto com nenhum plano abaixo de 3,5 s, e um movimento de câmera em cada cena. Cliques e entradas também começam nas batidas, mas não em toda batida: a maioria das batidas em uma cena não carrega nada. O arquivo de temporização deriva cada frame de beats.json, então as cenas são colocadas pelo número da batida e nunca por um frame digitado manualmente. O script termina com um veredito de confiabilidade: em good, construa; em check, peça ao usuário para confirmar de ouvido; em poor, a faixa não é adequada para um filme cortado na batida, então mude a faixa ou diga ao usuário que o filme não será sincronizado com a batida.

A maioria dos filmes segue todos os três. Alguns quebram um de propósito, e tudo bem quando é uma escolha: um filme cortado para uma narração, por exemplo, não pode também ser cortado na batida.

Trabalhando com o proprietário

• Eles aprovam assistindo. Abra o render HD para eles (open out/...mp4) com uma comparação lado a lado com o último corte aceito e algumas linhas simples com horários sobre o que mudou. Um 4K vem após o sim. Stills em tamanho real de qualquer coisa que eles devem escolher; dois proprietários mudaram sua escolha em tamanho real.
• **Recomende, não pergu