lovisdotio/motion2code

O que é?

Recursos principais

• 01Divide um vídeo original em quadros, pontos de corte, paleta e pontuação do loop para análise.
• 02Cria animações com SVG inline controlado por uma única timeline do GSAP.
• 03Expõe window.anim.seek(t) para renderização determinística quadro a quadro.
• 04Compara o original e o código lado a lado, com uma pontuação de diferença para cada momento.
• 05Mede a emenda do loop e renderiza a saída em mp4, GIF ou quadros PNG.

Casos de uso

• Recriar um clipe de motion design como código web editável e independente de resolução.
• Transformar uma gravação de tela de um app ou site em uma página interativa funcional com animações de rolagem.
• Verificar se uma animação gerada por IA corresponde ao vídeo de referência quadro a quadro.

Início rápido

1. 1

   Instale a skill no seu agente de programação

   npx skills add lovisdotio/motion2code
2. 2

   Instale Python 3.9 ou superior e ffmpeg (Playwright só é necessário para os scripts baseados em navegador)

3. 3

   Estude o vídeo de origem antes de reconstruí-lo

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

Antes de usar

• !Os scripts precisam do ffmpeg e, para algumas verificações e renderizações, do Playwright com Chromium.
• !O fluxo de trabalho foi pensado para ser conduzido por um agente de programação a partir de um vídeo de origem fornecido por você.

Em coleções

Tópicos

Perguntas frequentes

O que é motion2code?

Uma skill para agentes que recria vídeos de motion design como código com SVG inline em loop e GSAP, comparando quadro a quadro com o original. Motion2Code é uma skill para agentes de programação como Claude Code, Codex e Cursor. Agentes não conseguem assistir a vídeos; por isso, quando recebem a tarefa de recriar um clipe, tendem a estimar o timing, o easing e as cores. Esta skill oferece um fluxo de trabalho: analisar o vídeo original em quadros, paleta e pontuação do loop, criar a animação com formas em SVG inline controladas por uma única timeline do GSAP e, em seguida, compará-la com o original quadro a quadro.

motion2code é gratuito? Qual é a licença?

motion2code é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

motion2code ainda é mantido?

Manutenção ativa. O último commit de motion2code foi em 20 de out. de 2026.

Para que posso usar motion2code?

Recriar um clipe de motion design como código web editável e independente de resolução. Transformar uma gravação de tela de um app ou site em uma página interativa funcional com animações de rolagem. Verificar se uma animação gerada por IA corresponde ao vídeo de referência quadro a quadro.

Como instalar motion2code?

Instale a skill no seu agente de programação: npx skills add lovisdotio/motion2code Instale Python 3.9 ou superior e ffmpeg (Playwright só é necessário para os scripts baseados em navegador) Estude o vídeo de origem antes de reconstruí-lo: python3 scripts/study_video.py clip.mp4 -o study/

Onde consigo motion2code?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/lovisdotio/motion2code