theMatthewNewman/story-video-prep

O que story-video-prep faz?

Cria um curto vídeo animado (~15-40s) como um único arquivo HTML autossuficiente — tipografia cinética sobre um fundo cinematográfico, com o logotipo da marca e uma trilha musical livre de royalties incorporada (cortada + com fade in/out na duração exata, sincronizada com as batidas). Use quando o usuário desejar um vídeo promocional / de marca / campanha / lançamento / explicativo / "sizzle", um vídeo para e-mail ou landing page, ou disser "faça um vídeo / um curta-metragem / um corte de história / uma introdução animada." Produz um HTML reproduzível autossuficiente e o renderiza em MP4 real.

Como funciona

1. Entrada do usuário: O usuário fornece o texto a ser animado, o logotipo (opcional, pode ser URL ou caminho de arquivo), e uma faixa de áudio (opcional, URL ou arquivo). Se não fornecer, a skill usa uma faixa padrão livre de royalties.
2. Geração do HTML: A skill cria um único arquivo HTML com:
   • Um fundo cinematográfico (gradiente ou imagem/ vídeo embutido em Base64).
   • Tipografia cinética com animações usando anime.js (ou similar).
   • O logotipo da marca posicionado no canto inferior direito.
   • A trilha musical embutida em Base64 e sincronizada com a duração do vídeo.
3. Renderização para MP4: A skill usa puppeteer e ffmpeg (ou uma ferramenta similar) para capturar o HTML animado e convertê-lo em um arquivo MP4 real.

Plataformas suportadas

• Claude Code: Execute o comando claude code e use a skill.
• Cursor: Integração via configuração de skills.
• Codex: Compatível com a interface de agentes de código.

Pré-requisitos

• Node.js 18+ instalado.
• Dependências: puppeteer, ffmpeg (instalado via npm ou sistema).
• Para executar localmente:

  npm install -g puppeteer ffmpeg-static
  

Uso básico

Peça ao agente de IA: "Crie um curto vídeo promocional para meu produto chamado 'SuperApp' com o texto 'Rápido, Seguro, Confiável' e o logotipo em https://exemplo.com/logo.png".

O agente irá:

1. Baixar e processar o logotipo.
2. Gerar o HTML animado.
3. Renderizar o MP4.
4. Fornecer o arquivo de saída.

Exemplo de saída

Após a execução, você receberá:

• video.html — O arquivo HTML autossuficiente.
• video.mp4 — O vídeo renderizado em formato MP4.

Personalização

Você pode solicitar:

• Duração específica (ex.: "faça com 20 segundos").
• Cor de fundo ou gradiente (ex.: "use fundo azul escuro com gradiente dourado").
• Estilo de animação (ex.: "use efeito de digitação para o texto").
• Música específica (forneça URL para uma faixa livre de royalties).