Demo de produto SaaS (Remotion)

SaaS Product Demo Video

Fluxo completo para criar um vídeo de produto SaaS sincronizado com batida no Remotion. Abrange filmes cinematográficos silenciosos, demos horizontais travados na batida, reels verticais e filmes com camadas de colagem B-roll.

A skill é opinativa em três aspectos: ativos, vibe, batidas. Pule qualquer um e você produzirá um genérico motion graphics estilo Canva, igual a qualquer outra demo SaaS. A disciplina é o que faz a diferença.

Estas são fortes recomendações, não regras rígidas. A maioria das produções as segue; algumas as quebram com intenção (ex.: filmes com narração onde a sincronia com a batida entraria em conflito). Quando quebrar uma regra, faça-o com consciência.

---

Pré-requisitos

Antes de começar, verifique se estes itens estão em ordem. O primeiro é realmente obrigató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 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 companheiro 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 diálogo inline (sem companheiro de navegador); os planos são escritos diretamente no chat; as cenas são implementadas inline em vez de por subagentes despachados. Os três pilares (ativos / vibe / batidas) mais 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 disponível - consulte references/reference-video-vibe.md para a lógica de detecção completa.

   1. gemini CLI 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 env ou .env. Use o wrapper curl da skill em scripts/analyze-reference-video.sh.
   3. Nenhum dos acima - recorra ao copiar-colar manual no Google AI Studio. Desajeitado, mas sempre funciona; a qualidade é comparável.

Execute references/prereq-check.md como seu primeiro passo 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

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

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

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 recebida e a verificação de pixelização ao ampliar ativos.

Pilar 2 - Fluxo de vibe do vídeo de referência

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

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

• Automatizado (preferido quando disponível) - se o usuário tiver GEMINI_API_KEY definida, execute scripts/analyze-reference-video.sh <youtube-url> <slug> para cada vídeo. Usa 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 saída igualmente utilizável. Use isso quando a API não estiver disponível.

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

Pilar 3 - Sincronia com batida da trilha sonora

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

O pipeline:

1. Execute scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json. Emite BPM, frame do primeiro kick, timestamps + frames dos snares.
2. Ingira em um único objeto de constantes de tempo (consulte assets/code-templates/theme-v2.ts). Cada cena <Sequence from={...} durationInFrames={...}> puxa deste objeto.
3. Após a Fase 6 (cenas construídas), execute scripts/align-internal-events.py contra beats.json + uma lista de eventos dentro da cena para ajustá-los às batidas mais próximas dentro de ±6 frames. 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 conseguir apontar o motivo.
4. Use os helpers isSnare(n) / isKick(n) para afirmar em modo dev.
5. Execute scripts/check-typing-budget.py contra qualquer TypedText/TypedChars para verificar se cabe na duração da cena. Corta digitação fora da tela antes de enviar.

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

Estas cobrem situações além do padrão "tudo motion graphics, só grave uma captura de tela" de demo SaaS. Leia a referência relevante quando a situação do usuário precisar.

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 uma tela a tela pronta. references/script-development.md orienta através de um fluxo de diálogo estruturado que produz um esboço de 4 atos + tela a tela travada + página de referência de cópia travada, 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 imagens de estoque, clipes de colagem ou qualquer vídeo que queira como camada de fundo, use references/b-roll-integration.md e o template BRollLayer. O B-roll pode ser um fundo de opacidade total ou uma textura de baixa opacidade; o primitivo lida com corte, fade, modos de mesclagem e tempo correto de fps.

(Versões anteriores desta skill recomendavam enviar trabalho de ação ao vivo para Premiere/DaVinci. Isso está errado quando o B-roll está sendo usado como uma camada sob 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 UI real para gravar

Se o produto é uma extensão do Chrome, uma API ou está em estágio inicial e não há UI real do produto para capturar, references/schematic-ui-fidelity.md cobre como inventar UIs esquemáticas que pareçam 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 - templates de código em assets/code-templates/Schematic*.tsx.

Posicionamento de cliques - o ponto número 1 de retrabalho

Cliques do cursor errando botões é a reclamação mais comum entre produções. references/click-positioning.md cobre três abordagens (refs, constantes de posição computadas, overlay de debug) - escolha uma upfront. O custo de errar isso são múltiplos ciclos completos de re-renderização por cena.

Estilo de escrita - mantenha marcas de IA longe da cópia visível ao 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 grep pré-renderização que captura estes. Se o usuário tiver seu próprio guia de voz de marca, prefira esse.

---

Sequência ideal

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

1. Colete entradas primeiro, escreva 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 análises de vídeos de referência - automatizadas via scripts/analyze-reference-video.sh ou manual via AI Studio.
4. Detecte batidas e escreva o objeto de constantes de tempo. 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 debug por cena em Root.tsx. Aceleração essencial. Navegar por uma cena de 5 segundos é 30x mais rápido que o mestre completo.
7. Carregue toda fonte no nível superior de Root.tsx com subsets: ["latin"].
8. Use hífens em IDs de composição (v2-Scene06, nunca v2_Scene06).
9. Invoque superpowers:brainstorming com companheiro visual para decisões de estilo/layout. Maquetes HTML vencem prosa 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 necessário.
11. Auto-revise a especificação, depois usuário a aprova. Sem código até luz verde.
12. Invoque superpowers:writing-plans. Verificação de higiene do template de plano antes de despachar (consulte references/project-scaffold.md).
13. Construa primitivas de animação primeiro (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack conforme necessário). Depois cartões de UI esquemática. Depois cenas. Depois mestre.
14. Invoque superpowers:subagent-driven-development. Limite 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. Estabeleça o estilo. Obtenha 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 o mestre em 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 contra o mapa de batidas em velocidade 0.5x.

---

Í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