JZnebel/AutoDemo

/demo — Pipeline de Vídeo de Demonstração Automatizado

Você está criando um vídeo de demonstração narrado de uma aplicação web. Todo o fluxo — exploração, gravação, narração e renderização — acontece neste único comando.

Argumentos

Analise a partir de $ARGUMENTS:

• Primeiro argumento posicional: URL a ser demonstrada (obrigatório)
• --login <credenciais>: Credenciais de login no formato email:senha. Se fornecido, faça login antes de gravar.
• --brief <"o que mostrar">: Descrição em linguagem natural do que a demonstração deve cobrir. Pode ser bem curta — "mostrar o painel e criar um projeto" é o suficiente. Se omitido, explore livremente.
• --name <nome>: Nome de saída (padrão: derivado do hostname da URL)
• --duration <segundos>: Duração alvo do vídeo (padrão: 60)
• --voice <voz>: Voz TTS (padrão: en-US-GuyNeural)
• --preset <draft|production>: Predefinição de qualidade (padrão: draft)

Os argumentos também podem ser passados em linguagem natural após a URL. Todos estes são equivalentes:

/demo https://app.com --login [email protected]:pass123 --brief "mostrar a página de cobrança e adicionar um método de pagamento"
/demo https://app.com — fazer login como [email protected] / pass123, mostrar cobrança e adicionar método de pagamento
/demo https://app.com login: [email protected] pass123. Mostrar página de cobrança.

Analise o que conseguir. Se o usuário fornecer credenciais e instruções em inglês simples, use-as.

Pipeline

Fase 1: Explorar o app

Antes de gravar, entenda com o que está lidando:

1. Abra a URL via new_page ou navigate_page
2. Se credenciais fornecidas (--login), encontre o formulário de login e faça login primeiro. Procure por padrões comuns: /login, /sign-in, um link "Entrar", etc. Use fill para campos de email/senha, depois clique em enviar. Aguarde o carregamento da página do painel/página inicial antes de continuar.
3. Tire um screenshot e snapshot para entender o app
4. Capture a marca: Identifique o logotipo e a cor de destaque/marca do app.
   • Tente baixar a imagem do logotipo para o diretório de saída (resolvido na Fase 2) como logo.png (ou .svg/.webp). Durante a exploração, salve-o em um local temporário primeiro, depois mova-o para o diretório de saída final assim que o nome único for resolvido. Use evaluate_script para encontrar a URL da <img> do logotipo, depois use Bash curl ou wget para salvá-lo. O pipeline o detectará automaticamente e o usará no cartão de introdução.
   • Escolha a cor de destaque do botão principal/cor da marca do app e use-a como accentColor no narration.json (formato rgba).
5. Se um brief foi fornecido (--brief), use-o para guiar sua exploração. O brief diz o que o usuário considera importante — priorize essas funcionalidades. Se não houver brief, explore livremente.
6. Identifique as principais funcionalidades, navegação e fluxos interessantes
7. Planeje de 3 a 6 segmentos de demonstração que mostrem o app em aproximadamente duration segundos de narração

Pense sobre o que torna uma demonstração convincente:

• Se houver um brief, siga-o — o usuário sabe o que quer mostrar
• Comece com a funcionalidade mais visualmente impressionante ou única
• Mostre amplitude (navegar por diferentes seções), não profundidade (não fique preso em um único formulário)
• Termine com algo que amarre tudo (painel, configurações, resultados)
• Pule telas de login, spinners de carregamento e estados de erro na gravação — trate-os na configuração antes de screencast_start

Fase 2: Gravar

Configure o diretório de saída e inicie a gravação:

Diretório de saída: screencast-output/<name>/
Gravação: screencast-output/<name>/recording.mp4

1. Escolha um diretório de saída único. Antes de criar o diretório, verifique se screencast-output/<name>/ já existe. Se existir, acrescente um sufixo incremental: <name>-v2, <name>-v3, etc. Use o primeiro nome disponível. Por exemplo:

   # Verificar e encontrar o próximo nome disponível
   NOME="trafficstores"
   DIR="screencast-output/$NOME"
   if [ -d "$DIR" ]; then
     V=2; while [ -d "screencast-output/${NOME}-v${V}" ]; do V=$((V+1)); done
     NOME="${NOME}-v${V}"
     DIR="screencast-output/$NOME"
   fi
   mkdir -p "$DIR"
   

   Use o <name> resolvido (com sufixo se necessário) para TODOS os caminhos subsequentes nesta execução — gravação, narration.json, composição, saída de renderização, etc.
2. Crie o diretório de saída
3. Chame screencast_start com o caminho screencast-output/<name>/recording.mp4
4. Interaja com o app naturalmente — clique nas funcionalidades que planejou
   • Pause brevemente (1-2 segundos) em cada tela importante para que os espectadores possam lê-la
   • Clique em botões, preencha formulários com dados realistas, navegue entre seções
   • O fork do MCP lida com animação do cursor e segmentação automática automaticamente
5. Chame screencast_stop quando terminar

Dicas de gravação:

• Não se apresse — o pipeline acelerará partes chatas automaticamente
• PAUSE em telas visualmente interessantes (o pipeline desacelera essas para corresponder à narração)
• Evite rolar em iframes de origem cruzada — navegue diretamente ao invés disso
• Se algo demorar muito para carregar, o segmentador automático cortará a espera

Fase 3: Escrever narração

Escreva screencast-output/<name>/narration.json com base no que acabou de gravar. Você sabe exatamente o que aconteceu porque fez isso.

{
  "introTagline": "Título curto e impactante",
  "introSubtitle": "Nome do produto ou empresa",
  "outroHeading": "Pergunta de call to action",
  "outroUrl": "website.com",
  "outroCtaText": "Comece Agora",
  "accentColor": "rgba(59, 130, 246, 1)",
  "captionStyle": "pop",
  "voice": "en-US-AndrewNeural",
  "introLogoSrc": "screencast-output/<name>/logo.png",
  "segments": [
    {
      "text": "Narração para este segmento. Escreva de forma conversacional, como um humano apresentando.",
      "sceneIndex": 0,
      "sceneLabel": "Nome da Funcionalidade"
    }
  ],
  "fullText": "Todos os textos dos segmentos unidos com espaços."
}

Diretrizes de narração:

• Escreva como se estivesse apresentando para alguém por cima do ombro, não lendo documentação
• Use o presente: "Aqui vemos..." não "Aqui vimos..."
• Destaque elementos de UI específicos que o espectador deve notar
• Mantenha a narração total por volta do alvo de --duration
• Cada segmento deve ter 5-20 segundos de fala (~15-50 palavras)
• O accentColor deve corresponder à cor da marca do app (escolha com base no que viu)
• O sceneLabel de cada segmento se torna um terço inferior animado no vídeo — mantenha-os curtos (máximo 2-3 palavras): "Cadastro", "Construtor IA", "Site Ao Vivo"
• Defina introLogoSrc para o arquivo de logotipo que baixou na Fase 1 — ele aparece com uma animação de mola no cartão de introdução
• Defina captionStyle para combinar com a sensação do app: "pop" (saltitante, divertido), "clean" (vidro fosco, elegante), "bold" (grande, impactante), "minimal" (sutil), "karaoke" (sem fundo) ou "outline" (sombra de brilho)
• Escolha uma voice que corresponda ao tom do app:
  • en-US-AndrewNeural — Caloroso, confiante (boa opção padrão)
  • en-US-BrianNeural — Acessível, casual (startups, apps amigáveis)
  • en-US-ChristopherNeural — Confiável, autoritário (enterprise, fintech)
  • en-US-AriaNeural — Positivo, confiante (marketing, apps de consumo)
  • en-US-EmmaNeural — Alegre, claro (e-commerce, social)
  • en-US-AvaNeural — Expressivo, cuidadoso (saúde, bem-estar, comunidade)
  • en-US-JennyNeural — Amigável, atencioso (educação, suporte)
  • en-US-EricNeural — Racional (análise, ferramentas de dados)
  • en-US-GuyNeural — Apaixonado (ferramentas criativas, mídia)
  • en-GB-RyanNeural / en-GB-SoniaNeural — Britânico (internacional, luxo)

Fase 3.5: Projetar composição de vídeo personalizada

Escreva uma composição Remotion personalizada para este vídeo específico. Salve-a como screencast-output/<name>/composition.tsx. O pipeline a usará em vez do modelo MarketingDemo padrão.

Carregue as habilidades Remotion primeiro: Leia as regras de demo-render/.agents/skills/remotion-best-practices/rules/ — especialmente animations.md, timing.md, text-animations.md, transitions.md e sequencing.md.

Sua composição deve:

1. Exportar VideoComposition (o componente React) e calculateMarketingDemoDuration (função de duração)
2. Exportar o tipo MarketingDemoProps (re-exportar de ./MarketingDemo)
3. Aceitar os mesmos props que MarketingDemo — o pipeline passa o mesmo JSON

Blocos de construção disponíveis (importar de ./components/):

• DeviceMockup — Gravação de tela em cromo de navegador (videoSrc, accentColor, displayUrl, zoomRegions, layout)
• IntroCard / OutroCard — Modelos de introdução/saída padrão (tagline, subtitle, accentColor, logoSrc)
• WordHighlightCaptions — Legendas palavra por palavra (wordTimings, style, accentColor)
• LowerThird — Sobreposição de rótulo de cena (label, accentColor, leftOffset)
• ProgressBar — Indicador de progresso (accentColor)
• AudioWaveform — Visualizador reativo a áudio (variant, accentColor, samples)
• FeatureCallout — Chamada de anotação (label, side, y, accentColor)
• ChapterCard — Cartão divisor de cena (chapterNumber, title, accentColor)
• Presenter — Personagem 2D com sincronização labial (mouthCues, side)
• AvatarPip — Picture-in-picture do avatar
• SceneBreak — Flash visual breve nos limites da cena

Você também pode escrever componentes personalizados inline no arquivo de composição.

Decisões de design a serem tomadas por vídeo:

• Estilo de introdução: Escreva uma introdução personalizada ou use IntroCard. Corresponda à personalidade do app — terroso/orgânico, tecnológico/limpo, acolhedor/convidativo, ousado/impactante.
• Estilo de saída: Escreva uma saída personalizada ou use OutroCard. Mesma correspondência de personalidade.
• Quais sobreposições incluir: Nem todo vídeo precisa de todas as sobreposições. Pule AudioWaveform para demonstrações SaaS limpas. Pule ProgressBar para vídeos curtos. Pule LowerThird se os segmentos forem óbvios.
• Posições das sobreposições: LowerThird não precisa estar no canto superior esquerdo. Legendas não precisam estar no centro inferior. Escolha posições que não se sobreponham a elementos importantes de UI na gravação.
• Variedade de animação: Não use sempre o mesmo spring-in. Misture fade, slide, wipe, typewriter, stagger. As habilidades Remotion mostram os padrões.
• Transição entre introdução → conteúdo → saída: Fade, slide, wipe ou light leak. Escolha o que se adequa.

Exemplo de template literal para composition.tsx:

import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// Importar blocos de construção
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// Importar sua introdução/saída personalizada (escreva inline ou como componentes separados)
// Importar tipos
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };

export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
  return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}

// Seu componente de introdução personalizado (inline)
const MyIntro: React.FC<{...}> = (...) => { ... };

export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
  // Seu layout de composição único aqui
};

Regras do Remotion a seguir:

• Todas as animações impulsionadas por useCurrentFrame() — NÃO use hooks de requestAnimationFrame ou intervalos
• Sempre use componentes de sequência de Remotion e useCurrentFrame para animações baseadas em quadros
• Garanta que os componentes de áudio sejam montados com <Audio> e que os arquivos sejam referenciados corretamente