MoizIbnYousaf/marketing-cli

/marketing-demo — Gravador de Demonstração de Produto

Grave demonstrações de produtos para marketing. Dois caminhos de produção: rápido (ply + ffmpeg) para demonstrações simples, e polido (Remotion) para vídeos de marketing com marca.

Leituras

• brand/creative-kit.md — Cores, fontes, caminhos de logotipo para sobreposições com marca
• brand/voice-profile.md — Orientações de tom para sobreposições de texto
• brand/stack.md — Ferramentas disponíveis (ply, ffmpeg, remotion)

Ao Ativar

1. Leia brand/creative-kit.md para cores, fontes, caminhos de logotipo. Se estiver faltando, peça as cores da marca e o logotipo.
2. Leia brand/voice-profile.md para orientações de tom nas sobreposições de texto. Se estiver faltando, use tom claro/neutro.
3. Leia brand/stack.md para confirmar as ferramentas disponíveis. Se estiver faltando, detecte as ferramentas diretamente.
4. Verifique a disponibilidade das ferramentas:

   command -v ply && echo "ply: pronto" || echo "ply: ausente"
   command -v ffmpeg && echo "ffmpeg: pronto" || echo "ffmpeg: ausente"
   command -v npx && echo "remotion: disponível" || echo "remotion: indisponível"
   

5. Se ply ou ffmpeg estiverem ausentes, avise e sugira a instalação.

Regras de Duração por Tomada

Tipo de Demonstração	Duração por Tomada	Notas
Visão geral rápida	0,5-1s	Cortes rápidos, gerar entusiasmo
Demonstração de recurso	2-3s	Tempo para ler + compreender
Tutorial	4-5s	Ritmo instrucional
Clipe para redes sociais	1-2s	Chama atenção, rápido

Princípios de Contação de Histórias em Demonstrações

As demonstrações falham quando mostram o produto mecanicamente em vez de contar uma história. O espectador precisa de um motivo para continuar assistindo. Esses princípios vêm do que realmente gera engajamento em páginas de destino e redes sociais:

1. Comece com o resultado, não com a preparação. Os primeiros 2 segundos decidem se alguém assistirá ao restante. Mostre o estado "depois" — o painel com dados, o design concluído, o resultado. Preparação (login, carregamento, navegação) não merece atenção.
2. Um recurso = uma demonstração. Tentar enfiar 5 recursos em 30 segundos torna todos eles esquecíveis. Uma demonstração focada em um recurso vale mais do que uma turnê apressada.
3. Mostre o momento mágico. Todo produto tem uma interação em que os usuários dizem "nossa, que incrível". Encontre esse momento e construa a demonstração em torno dele — é por isso que as pessoas clicam em "testar".
4. Adicione contexto com sobreposições de texto. Vídeos em redes sociais são reproduzidos automaticamente sem som. Sem chamadas de texto, os espectadores veem a interface mudando sem ideia do que está acontecendo ou por que é importante. Cada tomada precisa de uma sobreposição de 3 a 6 palavras explicando o valor.
5. Ritmo: 2-3 segundos por conceito. Isso parece rápido, mas a atenção do espectador é implacável. Se uma tomada não merece seu tempo de tela com novas informações, corte-a.

Etapa 1: Determinar o Tipo de Demonstração

Tipo	Duração	Resolução	Formato	Caso de Uso
Demonstração principal	15-30s	1280x800	MP4	Acima da dobra na página inicial
Destaque de recurso	5-15s	1280x800	GIF/MP4	Seção de recursos, documentação
Tutorial completo	60-180s	1280x800	MP4	YouTube, apresentação de vendas
Clipe para redes sociais	5-15s	1080x1080	MP4	Instagram, Twitter/X
GIF para e-mail	3-8s	600x400	GIF	Campanhas de e-mail
Guia prático	30-90s	1280x800	MP4	Documentação de ajuda, integração

Pergunte ao usuário qual tipo, ou deduza pelo contexto.

Etapa 2: Planejar Lista de Tomadas

Antes de gravar, planeje cada tomada:

## Lista de Tomadas

1. [Ação: Navegar para a página inicial]
   - URL: https://exemplo.com
   - Aguardar: 1s para carregar
   - Destacar: Seção principal

2. [Ação: Clicar no botão "Começar"]
   - Aguardar: animação de transição
   - Destacar: Formulário de inscrição

3. [Ação: Preencher dados de demonstração]
   - Digitar: [email protected]
   - Destacar: Estado de sucesso

Cada tomada = uma captura de tela ply ou sequência de interação.

Etapa 3: Escolher Modo de Produção

Modo A: Demonstração Rápida (ply + ffmpeg)

Demonstrações rápidas e simples a partir de capturas de tela unidas em vídeo.

Capturar capturas de tela:

# Navegar e capturar cada tomada
ply navigate "https://exemplo.com"
ply screenshot --output marketing/demos/tomada-01.png
ply click "Começar"
ply screenshot --output marketing/demos/tomada-02.png

Unir com ffmpeg:

# MP4 a partir de capturas de tela (2 segundos por quadro)
ffmpeg -framerate 0.5 -i marketing/demos/tomada-%02d.png \
  -c:v libx264 -pix_fmt yuv420p \
  -vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
  marketing/demos/demo.mp4

# GIF de pré-visualização (menor qualidade, arquivo menor)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=10,scale=640:-1:flags=lanczos" \
  -c:v gif marketing/demos/demo-previsualizacao.gif

# GIF para e-mail (600px de largura, otimizado)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
  marketing/demos/demo-email.gif

# Corte quadrado para redes sociais (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
  marketing/demos/demo-quadrado.mp4

Modo B: Demonstração Polida (Remotion)

Para saída de nível de marketing com transições, sobreposições de texto, introduções com marca.

Gerar composição Remotion:

# Inicializar se necessário
npx remotion init marketing/demos/remotion-demo

# Renderizar vídeo final
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
  --output marketing/demos/demo-polida.mp4

Estrutura da composição:

src/
├── index.tsx          # Composição raiz
├── Intro.tsx          # Introdução com marca (logotipo, slogan)
├── DemoScene.tsx      # Captura de tela com sobreposição de texto
├── Transition.tsx     # Transição de fade/deslize entre cenas
└── Outro.tsx          # CTA + URL

Padrões Remotion chave (consulte references/remotion-examples.md para código completo dos componentes):

• Use <Img> para capturas de tela, <AbsoluteFill> para layout
• useCurrentFrame() + interpolate() para animações
• Extraia cores da marca de brand/creative-kit.md
• 30fps para reprodução suave, 1280x720 ou 1920x1080
• Adicione sobreposições de texto destacando recursos com <Sequence>

Cena de introdução (2-3s): Logotipo centralizado, slogan aparece gradualmente. Cores da marca como gradiente de fundo. Mantenha curto — o produto é a estrela.

Cena de demonstração (por tomada): A captura de tela preenche 80% do quadro. Sobreposição de texto na parte superior ou inferior com chamada de recurso de 1 linha. Use interpolate() para um zoom sutil (1.0 → 1.05 durante a duração da cena) para adicionar vida.

Transição entre cenas: Fade + leve deslize (200ms). Nunca use transições chamativas — elas distraem do produto.

Cena final (3-4s): Texto de CTA ("Experimente grátis em [url]"), logotipo e linha opcional de prova social. Este é o único slide que vende — mantenha todos os outros slides focados em mostrar.

Recuperação de Erros

Falhas do ply (página não carrega, elemento não encontrado, tempo limite): Pule para a tomada N+1 e documente a falha na lista de tomadas. Após todas as tomadas serem concluídas, revise as tomadas puladas e tente novamente uma vez. Se ainda falhar, use capturas de tela manuais como alternativa.

Falhas do ffmpeg (codec não encontrado, erro de formato): Verifique ffmpeg -codecs para codecs disponíveis. Se libx264 estiver ausente, tente -c:v h264 ou instale via brew install ffmpeg. Para problemas com paleta GIF, simplifique a cadeia de filtros — remova split/palettegen/paletteuse e use básico -vf "fps=10,scale=640:-1".

Falhas do Remotion (falha na renderização, erros de composição): Verifique a versão do node (node -v, precisa ser 18+). Se npx remotion render falhar, tente npx remotion render --gl=angle ou --gl=swangle para problemas de GPU. Para erros de composição, verifique se todos os caminhos de origem <Img> estão corretos e as imagens existem.

Etapa 4: Converter e Gerar Saída

Todas as saídas vão para marketing/demos/. Nomeie por tipo:

Saída	Nome do Arquivo	Notas
MP4 (desktop)	demo-principal.mp4	H.264, 1280x800
MP4 (redes sociais)	demo-social-1080.mp4	Quadrado, 1080x1080
GIF (pré-visualização)	demo-previsualizacao.gif	640px de largura, <5MB
GIF (e-mail)	demo-email.gif	600px de largura, <2MB
MP4 (polido)	demo-polida.mp4	Saída Remotion

Etapa 5: Resumo de Conclusão

## Ativos de Demonstração Criados

| Ativo | Tamanho | Formato | Uso Sugerido |
|-------|---------|---------|--------------|
| demo-principal.mp4 | 1.2MB | MP4 1280x800 | Principal da página inicial |
| demo-previsualizacao.gif | 3.4MB | GIF 640px | README, documentação |
| demo-email.gif | 1.1MB | GIF 600px | Campanhas de e-mail |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram, X |

Todos os ativos salvos em `marketing/demos/`.

Configurações de Viewport

Plataforma	Largura	Altura	Escala
Desktop	1280	800	1x
Desktop HD	1920	1080	1x
Mobile	390	844	2x
Instagram	1080	1080	1x
Twitter/X	1200	675	1x
E-mail	600	400	1x

Anti-Padrões

Erro	Por Que Falha
Gravar fluxos de login/cadastro	Ninguém se importa com sua tela de autenticação. Comece após o login.
Mostrar indicadores de carregamento	Edite-os ou pule para o estado carregado. Indicadores de carregamento matam o ritmo.
Sem sobreposições de texto em reprodução automática sem som	Vídeos em redes sociais são reproduzidos automaticamente sem som. Sem texto, os espectadores não têm ideia do que estão assistindo.
Demonstração com mais de 60s sem quebras de capítulo	A atenção cai após 15s. Se for longo, adicione títulos de seção claros.
Gravar em tamanhos de viewport inconsistentes	Tomadas que saltam entre tamanhos parecem amadoras. Trave o viewport antes de gravar.
Mostrar todos os recursos	Escolha no máximo 3-5 recursos. Demonstrações que mostram tudo não vendem nada.
Cursor do mouse vagando sem rumo	Planeje cada clique. O cursor deve se mover com propósito — linhas retas para os alvos.

Habilidades Relacionadas

• /creative — Visuais de anúncios, fotos de produtos (ativos estáticos, não demonstrações)
• /content-atomizer — Transforme a demonstração em postagens específicas para cada plataforma
• /page-cro — Audite a página que a demonstração apresenta