Repolode
Enviar
siyuanfeng636-cpu

siyuanfeng636-cpu/agentic-motion-graphics

Uma skill para Claude Code e um pipeline em Python que cria vídeos de motion graphics com HTML, animações GSAP, narração TTS e marcação de tempo por palavra com Whisper.

Ver no GitHub
Estrelas
9
Forks
0
Issues abertas
0
Último commit
há 27 dias

O que é?

Agentic Motion Graphics é uma skill para Claude Code e agentes de IA semelhantes que produz vídeos como código, em vez de gerar imagens. O agente escreve um script de cenas, monta cada quadro com HTML, CSS, SVG e timelines GSAP e renderiza o resultado em MP4 com a CLI do HyperFrames no Chromium headless.

O pipeline usa o áudio como referência de tempo. A narração é gerada com OpenAI TTS ou ElevenLabs, cortada com ffmpeg e alinhada palavra por palavra com whisper.cpp ou faster-whisper, para que as animações possam ser vinculadas a timestamps exatos. A música de fundo e os efeitos sonoros de interface são sintetizados em Python com numpy e scipy, em uma grade de 120 BPM.

O repositório inclui scripts para TTS, alinhamento de tempos e síntese sonora, um projeto-base para HyperFrames e templates de prompt para lançamentos de produtos, vídeos explicativos, clipes verticais curtos, propostas para clientes e animações de slides.

Recursos principais

  • 01Monta cada quadro com HTML, CSS, SVG e timelines GSAP, em vez de usar vídeo generativo.
  • 02Alinha a narração a timestamps por palavra com whisper.cpp ou faster-whisper.
  • 03Gera narração com OpenAI TTS ou ElevenLabs e remove silêncios com ffmpeg.
  • 04Sintetiza trilhas musicais em 120 BPM e efeitos sonoros de interface em Python.
  • 05Executa etapas de lint, snapshots e renderização headless pela CLI do HyperFrames.
  • 06É empacotada como um diretório de skill que o Claude Code pode descobrir automaticamente.

Casos de uso

  • Produzir vídeos de lançamento de produtos ou anúncios de funcionalidades a partir de um site ou changelog.
  • Transformar um artigo técnico ou paper extenso em um vídeo explicativo animado com narração.
  • Converter vídeos longos em clipes verticais com legendas e legendas palavra por palavra.
  • Animar slides estáticos em HTML ou Markdown para apresentações.

Início rápido

  1. 1

    Instale o FFmpeg e o Node.js 22 ou superior (exemplo para macOS com Homebrew).

    brew install ffmpeg node
  2. 2

    Gere o áudio da narração com o script de TTS.

    python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3
  3. 3

    A partir de templates/boilerplate, renderize o projeto para MP4 com o HyperFrames.

    npx hyperframes render --output dist/output.mp4 --fps 30

Antes de usar

  • Os exemplos de configuração do README são voltados para macOS (Homebrew), então outras plataformas precisam de uma configuração própria.
  • A etapa de TTS precisa de uma chave de API da OpenAI ou da ElevenLabs; ambos são serviços pagos.
  • O pipeline tem muitas dependências, incluindo Node.js 22 ou superior, FFmpeg, Whisper e ferramentas de áudio para Python.

Tópicos

#ai-video#motion-graphics#claude-code#gsap#text-to-speech#whisper#agentic-workflows#video-generation#claude-opus#code2video

Perguntas frequentes

O que é agentic-motion-graphics?
Uma skill para Claude Code e um pipeline em Python que cria vídeos de motion graphics com HTML, animações GSAP, narração TTS e marcação de tempo por palavra com Whisper. Agentic Motion Graphics é uma skill para Claude Code e agentes de IA semelhantes que produz vídeos como código, em vez de gerar imagens. O agente escreve um script de cenas, monta cada quadro com HTML, CSS, SVG e timelines GSAP e renderiza o resultado em MP4 com a CLI do HyperFrames no Chromium headless.
agentic-motion-graphics é gratuito? Qual é a licença?
agentic-motion-graphics é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
agentic-motion-graphics ainda é mantido?
Manutenção ativa. O último commit de agentic-motion-graphics foi em 25 de set. de 2026.
Para que posso usar agentic-motion-graphics?
Produzir vídeos de lançamento de produtos ou anúncios de funcionalidades a partir de um site ou changelog. Transformar um artigo técnico ou paper extenso em um vídeo explicativo animado com narração. Converter vídeos longos em clipes verticais com legendas e legendas palavra por palavra. Animar slides estáticos em HTML ou Markdown para apresentações.
Como instalar agentic-motion-graphics?
Instale o FFmpeg e o Node.js 22 ou superior (exemplo para macOS com Homebrew).: brew install ffmpeg node Gere o áudio da narração com o script de TTS.: python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3 A partir de templates/boilerplate, renderize o projeto para MP4 com o HyperFrames.: npx hyperframes render --output dist/output.mp4 --fps 30
Onde consigo agentic-motion-graphics?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/siyuanfeng636-cpu/agentic-motion-graphics

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

Projetos relacionados