Repolode
Enviar
OneMoh

OneMoh/html-explainer

Uma Agent Skill que transforma um tema em um vídeo explicativo narrado, com locução, legendas fixas e imagens de capa, renderizado localmente a partir de HTML.

Alternativa open source a:SynthesiaLumen5

Ver no GitHub
Estrelas
174
Forks
20
Issues abertas
2
Último commit
há 5 dias

O que é?

html-explainer é uma skill de agente para produzir vídeos explicativos. Você informa um tema ao agente, que executa o pipeline: pesquisa, roteiro de narração, locução com text-to-speech, sincronização de legendas e marcações de ritmo, criação de cenas em HTML, renderização de quadros e codificação com ffmpeg, além das imagens de capa. As cenas são escritas com HTML/CSS/GSAP e renderizadas quadro a quadro, avançando as animações até timestamps exatos em vez de gravar o navegador; assim, o mesmo quadro é renderizado de forma idêntica em todas as execuções.

A locução pode usar por padrão o mecanismo gratuito edge-tts ou o Volcano Engine speech synthesis 2.0, que requer uma API key armazenada em um arquivo de ambiente local. As legendas são sincronizadas a partir dos timestamps por palavra retornados pelo mecanismo TTS, e as animações das cenas são ancoradas ao texto das legendas, em vez de números de quadro fixos. Assim, editar a narração sincroniza novamente o vídeo de forma automática. O projeto inclui um catálogo com 23 estilos visuais e uma biblioteca com cerca de 40 primitivas de movimento.

A skill funciona com Claude Code, OpenAI Codex, WorkBuddy e outras ferramentas de agente que carregam arquivos SKILL.md. A renderização oferece 1080p ou 4K a 30 ou 60 fps, desfoque de movimento opcional e workers em múltiplos processos. A renderização básica requer Python 3.9+, Node 18+, Chrome ou Edge e ffmpeg.

Recursos principais

  • 01Renderiza as cenas de forma determinística, avançando as animações até timestamps exatos e evitando problemas de sincronização de gravação.
  • 02Oferece dois mecanismos de locução: edge-tts gratuito por padrão ou Volcano Engine TTS com uma API key.
  • 03Sincroniza as legendas com os timestamps por palavra do TTS e ancora as animações ao texto das legendas.
  • 04Inclui 23 modelos de estilos visuais e uma biblioteca com cerca de 40 primitivas de movimento.
  • 05Gera imagens de capa nos formatos 16:9, 3:4 e, opcionalmente, 9:16, junto com os arquivos MP4, SRT e VTT.
  • 06Oferece saída em 1080p e 4K a 30 ou 60 fps, com desfoque de movimento opcional e renderização paralela.

Casos de uso

  • Transformar um artigo ou uma página de documentação em um vídeo explicativo narrado.
  • Produzir uma série de vídeos sobre diferentes temas, com locução e legendas consistentes, usando um agente de programação com IA.
  • Gerar vídeos offline sem pagar taxas de API por vídeo, usando a voz padrão do edge-tts.
  • Criar renderizações reproduzíveis de vídeos explicativos, em que cada nova execução do pipeline gera quadros idênticos.

Tópicos

#agent-skill#video-generation#text-to-speech#html-to-video#claude-code#tts#subtitles#agent-skills#claude-code-skill#claude-code-skills

Perguntas frequentes

O que é html-explainer?
Uma Agent Skill que transforma um tema em um vídeo explicativo narrado, com locução, legendas fixas e imagens de capa, renderizado localmente a partir de HTML. html-explainer é uma skill de agente para produzir vídeos explicativos. Você informa um tema ao agente, que executa o pipeline: pesquisa, roteiro de narração, locução com text-to-speech, sincronização de legendas e marcações de ritmo, criação de cenas em HTML, renderização de quadros e codificação com ffmpeg, além das imagens de capa. As cenas são escritas com HTML/CSS/GSAP e renderizadas quadro a quadro, avançando as animações até timestamps exatos em vez de gravar o navegador; assim, o mesmo quadro é renderizado de forma idêntica em todas as execuções.
html-explainer é gratuito? Qual é a licença?
html-explainer é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
html-explainer ainda é mantido?
Manutenção ativa. O último commit de html-explainer foi em 14 de out. de 2026.
Para que posso usar html-explainer?
Transformar um artigo ou uma página de documentação em um vídeo explicativo narrado. Produzir uma série de vídeos sobre diferentes temas, com locução e legendas consistentes, usando um agente de programação com IA. Gerar vídeos offline sem pagar taxas de API por vídeo, usando a voz padrão do edge-tts. Criar renderizações reproduzíveis de vídeos explicativos, em que cada nova execução do pipeline gera quadros idênticos.
Onde consigo html-explainer?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/OneMoh/html-explainer

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados