Repolode
Enviar
siyuanfeng636-cpu

siyuanfeng636-cpu/agentic-motion-graphics

Una skill de Claude Code y un pipeline en Python que generan videos de motion graphics a partir de HTML, animaciones GSAP, narración TTS y sincronización por palabra con Whisper.

Ver en GitHub
Estrellas
9
Forks
0
Issues abiertos
0
Último commit
hace 27 días

¿Qué es?

Agentic Motion Graphics es una skill para Claude Code y agentes de IA similares que produce videos mediante código, en lugar de generar metraje. El agente escribe un guion de escenas, construye cada fotograma con HTML, CSS, SVG y timelines de GSAP, y renderiza el resultado en MP4 con el CLI de HyperFrames en Chromium headless.

El pipeline usa el audio como referencia temporal. La voz en off se genera con OpenAI TTS o ElevenLabs, se recorta con ffmpeg y se sincroniza palabra por palabra con whisper.cpp o faster-whisper, para que las animaciones puedan vincularse a marcas de tiempo exactas. La música de fondo y los efectos de sonido de la interfaz se sintetizan en Python con numpy y scipy sobre una cuadrícula de 120 BPM.

El repositorio incluye scripts para TTS, sincronización temporal y síntesis de sonido; un proyecto base para HyperFrames; y plantillas de prompts para lanzamientos de productos, videos explicativos, clips verticales cortos, propuestas para clientes y animaciones de diapositivas.

Funciones clave

  • 01Construye cada fotograma con HTML, CSS, SVG y timelines de GSAP, en lugar de usar video generativo.
  • 02Sincroniza la narración con marcas de tiempo por palabra mediante whisper.cpp o faster-whisper.
  • 03Genera la voz en off con OpenAI TTS o ElevenLabs y recorta los silencios con ffmpeg.
  • 04Sintetiza música de fondo a 120 BPM y efectos de sonido de la interfaz en Python.
  • 05Ejecuta pasos de lint, snapshots y renderizado headless mediante el CLI de HyperFrames.
  • 06Se distribuye como un directorio de skill que Claude Code puede detectar automáticamente.

Casos de uso

  • Crear videos de lanzamiento de productos o anuncios de funciones a partir de un sitio web o changelog.
  • Convertir un artículo técnico extenso o un artículo de investigación en un video explicativo animado con narración.
  • Convertir videos largos en clips verticales subtitulados, con subtítulos palabra por palabra.
  • Animar diapositivas estáticas en HTML o Markdown para presentaciones.

Inicio rápido

  1. 1

    Instala FFmpeg y Node.js 22 o posterior (ejemplo para macOS con Homebrew).

    brew install ffmpeg node
  2. 2

    Genera el audio de la voz en off con el script de TTS.

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

    Desde templates/boilerplate, renderiza el proyecto a MP4 con HyperFrames.

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

Antes de usarlo

  • Los ejemplos de configuración del README están centrados en macOS (Homebrew), por lo que otras plataformas requieren una configuración propia.
  • El paso de TTS necesita una clave de API de OpenAI o ElevenLabs; ambos son servicios de pago.
  • El pipeline tiene muchas dependencias, como Node.js 22 o posterior, FFmpeg, Whisper y herramientas de audio de Python.

Temas

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

Preguntas frecuentes

¿Qué es agentic-motion-graphics?
Una skill de Claude Code y un pipeline en Python que generan videos de motion graphics a partir de HTML, animaciones GSAP, narración TTS y sincronización por palabra con Whisper. Agentic Motion Graphics es una skill para Claude Code y agentes de IA similares que produce videos mediante código, en lugar de generar metraje. El agente escribe un guion de escenas, construye cada fotograma con HTML, CSS, SVG y timelines de GSAP, y renderiza el resultado en MP4 con el CLI de HyperFrames en Chromium headless.
¿agentic-motion-graphics es gratuito? ¿Qué licencia tiene?
agentic-motion-graphics es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿agentic-motion-graphics sigue mantenido?
Mantenimiento activo. El último commit de agentic-motion-graphics fue el 25 sept 2026.
¿Para qué puedo usar agentic-motion-graphics?
Crear videos de lanzamiento de productos o anuncios de funciones a partir de un sitio web o changelog. Convertir un artículo técnico extenso o un artículo de investigación en un video explicativo animado con narración. Convertir videos largos en clips verticales subtitulados, con subtítulos palabra por palabra. Animar diapositivas estáticas en HTML o Markdown para presentaciones.
¿Cómo se instala agentic-motion-graphics?
Instala FFmpeg y Node.js 22 o posterior (ejemplo para macOS con Homebrew).: brew install ffmpeg node Genera el audio de la voz en off con el script de TTS.: python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3 Desde templates/boilerplate, renderiza el proyecto a MP4 con HyperFrames.: npx hyperframes render --output dist/output.mp4 --fps 30
¿Dónde consigo agentic-motion-graphics?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/siyuanfeng636-cpu/agentic-motion-graphics

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados