Vídeo demo de produto, passo 2: corte SaaS de 20–45 s no ritmo

Vídeo de Demonstração de Produto SaaS

Fluxo de trabalho ponta a ponta para produzir um filme de produto SaaS sincronizado com a batida no Remotion. Abrange filmes cinematográficos silenciosos, demonstrações horizontais sincronizadas com a batida, reels verticais e filmes com camadas de b-roll em colagem.

A skill tem opiniões firmes sobre três coisas: ativos, estilo (vibe) e batidas (beats). Pule qualquer um deles e você produzirá um vídeo de motion graphics genérico no estilo Canva, que se parece com todas as outras demonstrações SaaS. A disciplina é o que faz a diferença.

Estas são fortes recomendações em vez de regras rígidas. A maioria das produções as segue; algumas as quebram intencionalmente (por exemplo, filmes com narração onde a sincronia com a batida entraria em conflito com a narração). Quando você quebrar uma regra, faça-o conscientemente.

---

Pré-requisitos

Antes de começar, verifique se estes itens estão em vigor. O primeiro é realmente necessário; os outros são fortes recomendações com alternativas documentadas.

1. Remotion instalado (obrigatório). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Consulte references/project-scaffold.md para obter o package.json / tsconfig.json / remotion.config.ts mínimo exato - nunca execute npx create-video dentro de um repositório git existente (ele trava em um prompt de seta).

2. Plugin Super Powers (fortemente recomendado, não obrigatório). Quando disponível, esta skill orquestra superpowers:using-superpowers, superpowers:brainstorming (com complemento visual), superpowers:writing-plans e superpowers:subagent-driven-development. Eles fornecem maquetes HTML no navegador para decisões de layout, documentos de plano formais e o loop de subagente implementador + revisor.

   Se o superpowers não estiver instalado, a skill ainda funciona - o fluxo de trabalho se torna mais conversacional e um pouco mais lento. O brainstorming se torna um diálogo inline (sem complemento no navegador); os planos são escritos diretamente no chat; as cenas são implementadas inline em vez de por meio de subagentes despachados. Os três pilares (ativos / estilo / batidas), além de b-roll, UI esquemática, posicionamento de cliques, estilo de escrita e os scripts em scripts/ funcionam da mesma forma. Não recuse o trabalho por causa de um plugin ausente - adapte-se e prossiga.

3. Python 3 + librosa disponíveis. A detecção de batidas executa scripts/detect-beats.py que importa librosa. Se não estiver instalado, execute pip install --break-system-packages librosa numpy soundfile e avise o usuário - não faça isso silenciosamente.

4. Para análise de vídeo de referência (Pilar 2): a skill suporta três caminhos em ordem de prioridade. Use o mais alto que estiver disponível - consulte references/reference-video-vibe.md para a lógica de detecção completa.

   1. CLI gemini no PATH (CLI oficial do Google ou wrappers da comunidade como gemini-yt). Execute com o prompt + URL do YouTube como argumentos.
   2. GEMINI_API_KEY definida no ambiente ou .env. Use o wrapper curl da skill em scripts/analyze-reference-video.sh.
   3. Nenhum dos acima - recorra ao copiar-colar manual do Google AI Studio. Desajeitado, mas sempre funciona; a qualidade é comparável.

Execute references/prereq-check.md como seu primeiro movimento em uma nova sessão.

---

Os três pilares

Estas são as atividades de alto impacto. Pular uma para "economizar tempo" quase sempre custa mais tempo adiante.

Pilar 1 - Integração de ativos (Asset intake onboarding)

Antes de qualquer outra coisa, execute o questionário estruturado em assets/prompt-templates/asset-intake-questionnaire.md. Ele pergunta sobre:

• Proporção de aspecto (16:9 horizontal, 9:16 vertical ou ambos em paralelo - consulte references/vertical-port.md se for ambos)
• Duração em segundos (20-45s recomendado)
• Logotipo - SVG preferido. Se for apenas PNG, capture as dimensões nativas para evitar pixelização quando ampliado.
• Cores hexadecimais da marca (acento primário + 3-6 pastéis de suporte)
• Pilha de fontes (todas devem estar no Google Fonts)
• Texto / roteiro - prefira um rascunho fornecido pelo usuário em vez de gerar um. Se eles não tiverem roteiro, consulte references/script-development.md.
• Narração (opcional)
• Arquivo de trilha sonora - necessário para sincronia com a batida. Se o usuário não tiver nenhum, escolha um royalty-free de estoque.

Consulte references/asset-intake.md para o fluxo de integração completo, incluindo o conjunto mínimo viável de ativos parciais, higiene de nomenclatura na cópia e a verificação de pixelização por ampliação de ativos.

Pilar 2 - Fluxo de trabalho de estilo de vídeo de referência (Reference-video vibe workflow)

Antes de escrever cenas, peça ao usuário 2-3 vídeos de referência do YouTube cujo estilo eles desejam. Em seguida, produza uma análise do diretor para cada um.

Dois caminhos suportados (consulte references/reference-video-vibe.md):

• Automatizado (preferido quando disponível) - se o usuário tiver uma GEMINI_API_KEY definida, execute scripts/analyze-reference-video.sh <youtube-url> <slug> para cada vídeo. Usa o Gemini Pro Preview via curl. Leva ~30s por vídeo. As saídas vão para references/gemini-<slug>.md.
• Manual (sempre funciona) - abra aistudio.google.com, cole o prompt de scripts/reference-video-prompt.md junto com a URL do YouTube, copie o resultado de volta para um arquivo. Desajeitado, mas produz uma saída igualmente utilizável. Use isso quando a API não estiver disponível.

O vocabulário de verbos do diretor (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) é a saída mais importante - ela fornece primitivas de movimento específicas para construir ao redor.

Pilar 3 - Sincronia com a batida da trilha sonora (Soundtrack beat-sync)

Os limites das cenas devem cair em caixas (a sensação retórica de "batida de bateria"). Eventos internos (cliques, aterrissagens de cartões, início de contadores) devem cair em bumbos ou caixas dentro da cena.

O pipeline:

1. Execute scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, quadro do primeiro bum, timestamps e quadros da caixa.
2. Ingira em um único objeto de constantes de temporização (consulte assets/code-templates/theme-v2.ts). Toda cena <Sequence from={...} durationInFrames={...}> puxa disso.
3. Após a Fase 6 (cenas construídas), execute scripts/align-internal-events.py contra beats.json + uma lista de eventos na cena para ajustá-los nas batidas mais próximas dentro de ±6 quadros. Esta é a iteração de segundo maior impacto após a renderização inicial - o público sente eventos internos fora da batida como "ritmo às vezes estranho", sem ser capaz de apontar o motivo.
4. Use os helpers isSnare(n) / isKick(n) para afirmar no modo de desenvolvimento.
5. Execute scripts/check-typing-budget.py contra qualquer TypedText/TypedChars para verificar se cabe na duração da cena. Corta a digitação na tela antes de ser enviada.

Matemática completa, helpers, alinhamento de eventos internos e a verificação de orçamento de digitação em references/beat-sync.md.

---

Capacidades adjacentes - quando o básico não é suficiente

Elas cobrem situações além da demonstração SaaS padrão "tudo motion-graphics, apenas grave uma captura de tela". Leia a referência relevante quando a situação do usuário precisar dela.

Desenvolvimento de roteiro - quando o usuário não tem roteiro

A maioria dos usuários vem com uma ideia vaga de produto, não com uma tela a tela finalizada. references/script-development.md percorre um fluxo de diálogo estruturado que produz um esboço de 4 atos + tela a tela bloqueada + página de referência de texto bloqueada, pronto para alimentar o documento de especificação.

Integração de b-roll - quando o filme usa camadas de ação ao vivo ou colagem

Se o usuário tiver filmagens de estoque, clipes de colagem ou qualquer vídeo que deseje como camada de fundo, use references/b-roll-integration.md e o modelo BRollLayer. O b-roll pode ser um fundo de opacidade total ou uma textura de baixa opacidade; a primitiva lida com corte, fade, modos de mesclagem e temporização de quadros por segundo corrigida.

(Versões anteriores desta skill recomendavam enviar trabalhos de ação ao vivo para Premiere/DaVinci. Isso está errado quando o b-roll está sendo usado como uma camada sob os motion graphics - o Remotion lida bem com isso e manter a produção em uma ferramenta é um ganho de produtividade.)

Fidelidade de UI esquemática - quando o produto não tem interface real para gravar

Se o produto for uma extensão do Chrome, uma API ou estiver em estágio inicial e não houver UI real do produto para capturar tela, references/schematic-ui-fidelity.md aborda como inventar UIs esquemáticas que parecem polidas sem infringir plataformas reais (LinkedIn, Gmail, Slack). Três padrões de referência: cartão de perfil, compositor de e-mail, painel de API - modelos de código em assets/code-templates/Schematic*.tsx.

Posicionamento de cliques - a dor de cabeça número 1 na iteração

Cliques do cursor faltando botões é a reclamação mais comum dos usuários em todas as produções. references/click-positioning.md aborda três abordagens (refs, constantes de posição computadas, sobreposição de depuração) - escolha uma antecipadamente. O custo de errar isso são vários ciclos completos de re-renderização por cena.

Estilo de escrita - mantenha os traços de IA longe do texto voltado para o usuário

Travessões, aspas curvas e certos tiques de fraseamento gritam "gerado por IA". references/writing-style.md é o guia de estilo padrão com uma verificação de grep pré-renderização que captura esses itens. Se o usuário tiver seu próprio guia de voz da marca, prefira esse.

---

Sequência ideal

O fluxo completo ponta a ponta. Consulte references/ideal-sequence.md para a versão anotada com a justificativa.

1. Reúna as entradas primeiro, escreva o código por último. Execute o questionário de integração de ativos.
2. Desenvolva o roteiro se o usuário não tiver um - references/script-development.md.
3. Produza as análises de vídeos de referência - automatizadas via scripts/analyze-reference-video.sh ou manuais via AI Studio.
4. Detecte as batidas e escreva o objeto de constantes de temporização. scripts/detect-beats.py → theme-v2.ts. Todo início de cena deriva das batidas.
5. Estruture o Remotion manualmente. package.json / tsconfig.json / remotion.config.ts mínimos. Nunca npx create-video dentro de um repositório git.
6. Registre composições de depuração por cena em Root.tsx. Aceleração essencial. Navegar por uma cena de 5 segundos é 30x mais rápido do que a composição mestre completa.
7. Carregue todas as fontes no nível superior de Root.tsx com subsets: ["latin"].
8. Use hífens nos IDs de composição (v2-Scene06, nunca v2_Scene06).
9. Invoque superpowers:brainstorming com complemento visual para decisões de estilo/layout. Maquetes HTML vencem texto toda vez.
10. Escreva o documento de especificação. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Inclua uma seção de fidelidade de UI esquemática se alguma for necessária.
11. Auto-revise a especificação, depois o usuário a aprova. Sem código até o sinal verde.
12. Invoque superpowers:writing-plans. Verificação de higiene do modelo de plano antes de despachar (consulte references/project-scaffold.md).
13. Construa as primitivas de animação primeiro (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack conforme necessário). Em seguida, cartões de UI esquemática. Depois cenas. Depois a composição mestre.
14. Invoque superpowers:subagent-driven-development. Limite os lotes de subagentes a 3-4 arquivos por despacho - lotes maiores às vezes ficam sem contexto no meio da tarefa. Consulte references/iteration-playbook.md.
15. Renderize apenas a Cena 1 para teste. Estabeleça o estilo. Obtenha a aprovação do usuário antes do resto.
16. Itere em ondas. Limite cada onda a 5-8 correções. Execute a passagem de alinhamento de eventos internos uma vez após a renderização base - essa única passagem aperta o ritmo visivelmente.
17. Renderize a composição mestre na qualidade de publicação. --crf=14 --image-format=png (HD) ou --crf=15 --image-format=png --scale=2 (4K). Consulte references/render-export.md.
18. Verifique pontualmente o mapa de batidas a 0,5x da velocidade.

---

Índice de referências

O diretório references/ contém a profundidade. Carregue apenas o que você precisa para a fase atual.

• ideal-sequence.md - o fluxo anotado completo, com justificativa
• prereq-check.md - o que verificar antes de começar
• asset-intake.md - fluxo de integração completo, fallback de ativos parciais, verificação de ampliação de ativos, higiene de nomenclatura
• script-development.md - metodologia tela a tela quando o usuário não tem roteiro
• reference-video-vibe.md - protocolo de análise Gemini (caminhos API / CLI / AI Studio)
• beat-sync.md - matemática da grade de batidas, regra de limite de cena, alinhamento de eventos internos, verificação de orçamento de digitação
• project-scaffold.md - configuração mínima do Remotion, lista de verificação de commit, higiene do modelo de plano, essentials do .gitignore
• animation-patterns.md - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, além de extensões
• b-roll-integration.md - padrões de BRollLayer, tratamentos de opacidade/mesclagem, desempenho de renderização
• schematic-ui-fidelity.md - projetando UI falsa que parece polida
• click-positioning.md - três abordagens para manter os cliques do cursor nos alvos certos
• writing-style.md - travessões e outros traços de IA a evitar em texto na tela
• cursor-math.md - deslocamento de ponto de acesso, pontos-chave, transformação de proporção de escala
• iteration-playbook.md - estrutura de ondas, revisões em lote, lotes de subagentes, reinícios de hot-reload no Studio
• render-export.md - comandos de renderização HD/4K, justificativa do CRF
• gotchas.md - sublinhados em IDs de composição, avisos de fonte, carregamento itálico, problema de escala do MaskReveal
• vertical-port.md - disciplina de portabilidade de reel 9:16

Assets

• assets/prompt-templates/ - modelos preenchíveis para integração de ativos, documentos de especificação, folhas de batidas
• assets/code-templates/ - componentes testados em batalha (constantes de tema, easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Scripts

• scripts/detect-beats.py - rastreamento de batidas baseado em librosa. Emite BPM, primeiro bum, quadros de caixa/bumbo no fps alvo.
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - wrapper Gemini Pro para análises de diretor de vídeos do YouTube.
• scripts/align-internal-events.py - alinha eventos internos na batida dentro de uma tolerância de ±quadros.
• scripts/check-typing-budget.py - verifica se TypedText/TypedChars cabe na duração da cena antes da renderização.

---

Quando a skill NÃO deve ser usada

• Iteração profunda em projeto Remotion existente. Se o usuário estiver a 20+ commits em um filme e pedindo ajustes da onda N+1, não execute a integração novamente. Carregue references/iteration-playbook.md e references/beat-sync.md e vá.
• Demonstrações não SaaS. Recapitulação de evento, montagem de depoimento, screencast de tutorial - os padrões de sincronia com a batida + cartões de UI de produto não se aplicam de forma limpa.
• Filmagens documentais ou de cabeça falante como assunto. Esta skill lida com b-roll como uma camada sob motion graphics. Se a ação ao vivo é o assunto do filme (entrevistas, unboxing, walkthroughs), use um editor não linear como Premiere, DaVinci ou ...

[truncado para tradução]