Repolode
Enviar
lovisdotio

lovisdotio/motion2code

Una skill para agentes que reconstruye videos de motion design como código GSAP y SVG inline en bucle, y lo compara fotograma a fotograma con el original.

Ver en GitHub
Estrellas
335
Forks
32
Issues abiertos
2
Último commit
hace 18 días

¿Qué es?

Motion2Code es una skill para agentes de programación como Claude Code, Codex y Cursor. Los agentes no pueden ver videos, así que, cuando se les pide recrear un clip, suelen hacer conjeturas sobre los tiempos, la interpolación y los colores. Esta skill les proporciona un flujo de trabajo: analizar el video original para extraer fotogramas, paleta y puntuación del bucle; crear la animación con formas SVG inline controladas por una sola timeline de GSAP; y, después, compararla con el original fotograma a fotograma.

La página generada expone una función seek(t), para que se pueda renderizar y probar cualquier instante de forma determinista, y un script de verificación mide si el bucle es continuo. Para grabaciones de pantalla de sitios web y aplicaciones, la skill va un paso más allá y crea una página funcional con GSAP ScrollTrigger, botones reales y desplazamiento. El repositorio incluye seis clips de galería reconstruidos, cada uno con una página para comparar ambas versiones lado a lado.

Funciones clave

  • 01Divide el video original en fotogramas y determina los puntos de corte, la paleta y la puntuación del bucle para analizarlo.
  • 02Crea la animación con SVG inline controlado por una sola timeline de GSAP.
  • 03Expone window.anim.seek(t) para renderizar de forma determinista fotograma a fotograma.
  • 04Compara el original y el código lado a lado mediante una puntuación de diferencia para cada instante.
  • 05Mide la transición entre el final y el inicio del bucle y renderiza el resultado en mp4, GIF o fotogramas PNG.

Casos de uso

  • Recrear un clip de motion design como código web editable e independiente de la resolución.
  • Convertir una grabación de pantalla de una aplicación o sitio web en una página interactiva funcional con animaciones al desplazarse.
  • Comprobar que una animación generada por IA coincide con el video de referencia fotograma a fotograma.

Inicio rápido

  1. 1

    Instala la skill en tu agente de programación

    npx skills add lovisdotio/motion2code
  2. 2

    Instala Python 3.9 o posterior y ffmpeg (Playwright solo es necesario para los scripts basados en navegador)

  3. 3

    Estudia el video original antes de reconstruirlo

    python3 scripts/study_video.py clip.mp4 -o study/

Antes de usarlo

  • Los scripts necesitan ffmpeg y, para algunas comprobaciones y renderizados, Playwright con Chromium.
  • El flujo de trabajo está pensado para que lo ejecute un agente de programación a partir de un video original que proporciones.

En colecciones

Herramientas, skills y plugins para Claude CodeBibliotecas de skills para agentes de IA

Temas

#agent-skills#svg#gsap#animation#motion-design#video-to-code#claude-code

Preguntas frecuentes

¿Qué es motion2code?
Una skill para agentes que reconstruye videos de motion design como código GSAP y SVG inline en bucle, y lo compara fotograma a fotograma con el original. Motion2Code es una skill para agentes de programación como Claude Code, Codex y Cursor. Los agentes no pueden ver videos, así que, cuando se les pide recrear un clip, suelen hacer conjeturas sobre los tiempos, la interpolación y los colores. Esta skill les proporciona un flujo de trabajo: analizar el video original para extraer fotogramas, paleta y puntuación del bucle; crear la animación con formas SVG inline controladas por una sola timeline de GSAP; y, después, compararla con el original fotograma a fotograma.
¿motion2code es gratuito? ¿Qué licencia tiene?
motion2code es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿motion2code sigue mantenido?
Mantenimiento activo. El último commit de motion2code fue el 20 oct 2026.
¿Para qué puedo usar motion2code?
Recrear un clip de motion design como código web editable e independiente de la resolución. Convertir una grabación de pantalla de una aplicación o sitio web en una página interactiva funcional con animaciones al desplazarse. Comprobar que una animación generada por IA coincide con el video de referencia fotograma a fotograma.
¿Cómo se instala motion2code?
Instala la skill en tu agente de programación: npx skills add lovisdotio/motion2code Instala Python 3.9 o posterior y ffmpeg (Playwright solo es necesario para los scripts basados en navegador) Estudia el video original antes de reconstruirlo: python3 scripts/study_video.py clip.mp4 -o study/
¿Dónde consigo motion2code?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/lovisdotio/motion2code

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

Proyectos relacionados

oil-oil / oil-motion

Una skill de agente para Claude Code y Codex que convierte el movimiento generado por IA en animaciones web controladas por scroll, mouse, arrastre, toque u orientación del dispositivo.

Frontend y UI#agent-skill#web-animation#scroll-animation
2,8 mil+85 esta semana205PythonMITBien mantenidoActualizado el mes pasado