AgentBuff/animacao-explicadora

O que animacao-explicadora faz?

Explicadores técnicos animados em HTML com várias cenas, narração TTS e exportação MP4 com um único comando. Instale via: npx skills add AgentBuff/animation-explainer

Visão Geral

Esta skill permite que você crie explicadores técnicos animados em HTML com múltiplas cenas, narração por texto-para-fala (TTS) e exportação para MP4 com um único comando. Ideal para criar demonstrações visuais interativas ou tutoriais animados para documentação, apresentações ou compartilhamento em redes sociais.

Como Funciona

1. Geração do HTML: A skill gera um arquivo HTML contendo animações CSS e JavaScript que definem as várias cenas do explicador.
2. Narração TTS: A narração é gerada usando texto-para-fala, que pode ser local ou via API (ex.: Google Cloud TTS, Amazon Polly).
3. Exportação MP4: O HTML é executado em um navegador headless (ex.: Puppeteer) e a saída é capturada e combinada com o áudio usando ffmpeg para produzir o vídeo MP4 final.

Requisitos

• Node.js (v14 ou superior)
• ffmpeg instalado no sistema
• Navegador headless (Chrome/Chromium) para captura de tela

Instalação

npx skills add AgentBuff/animation-explainer

Uso

1. Execute a skill em seu agente de IA preferido (Claude Code, Cursor, Codex, etc.).
2. Forneça uma descrição do explicador técnico que deseja criar.
3. A skill gerará o HTML, áudio TTS e script de exportação.
4. Execute o comando de exportação para gerar o MP4:

./export.sh output.mp4

Estrutura de Arquivos

• index.html - O arquivo HTML com as animações.
• narration.mp3 - O arquivo de áudio com a narração TTS.
• export.sh - Script para exportar o MP4.
• config.json - Configurações para a animação e TTS.

Personalização

Você pode personalizar as cores, fontes e estilos das animações editando o arquivo config.json. As opções suportadas incluem:

• scenes: Lista de cenas com título, descrição e duração.
• voice: Voz TTS a ser usada (ex.: pt-BR-Standard-A).
• style: Estilos CSS para as animações.

Exemplo de Configuração

{
  "scenes": [
    {
      "title": "Introdução",
      "description": "Explicação do conceito básico",
      "duration": 5
    },
    {
      "title": "Funcionamento",
      "description": "Demonstração do processo",
      "duration": 10
    }
  ],
  "voice": "pt-BR-Standard-A"
}

Solução de Problemas

• Erro: ffmpeg não encontrado: Instale o ffmpeg via sudo apt install ffmpeg (Linux) ou brew install ffmpeg (macOS).
• Áudio não sincronizado: Ajuste a duração das cenas no config.json para corresponder ao áudio.
• Navegador headless não inicia: Certifique-se de que o Chrome/Chromium está instalado.

Licença

MIT