Compétence permettant aux agents de codage de reconstruire une vidéo d'animation en code propre et éditable : graphiques SVG inline et une timeline GSAP, avec positionnement image par image, bouclage sans couture et comparaison côte à côte avec la vidéo originale ; les enregistrements d'écran de sites web ou d'applications peuvent également être transformés en pages réellement défilables et cliquables.
Nombre d'étoiles 303 (+8 / 24h)
Raison
- Les agents ne peuvent pas voir les vidéos, donc study_video.py divise d'abord le clip en une image toutes les 0.25 secondes, les images avant et après chaque coupe dure, une planche contact, une palette de couleurs unies précise, et détermine si la vidéo originale est bouclée
- frame_diff.py génère des images côte à côte de la vidéo originale et du code à tout moment, attribue un score et liste les 5 pires endroits ; check_anim.py vérifie les conventions de la page, la liste blanche des scripts externes, l'absence d'intégration cachée de vidéos ou de bitmaps, ainsi que la couture de la boucle
- Règles strictes : utiliser uniquement la vidéo fournie, ne pas régénérer, intégrer ni tracer les images, écrire le texte selon l'invite originale ; la galerie contient 6 exemples de reconstruction, les vidéos originales étant générées par MiniMax H3 Max sur fal
Utilisation
- Claude Code : claude plugin marketplace add lovisdotio/motion2code, puis claude plugin install motion2code@motion2code ; pour Codex, Cursor, Gemini CLI, etc., utilisez npx skills add lovisdotio/motion2code
- Dites à l'agent « reconstruire clip.mp4 en une animation SVG + GSAP bouclable » ou « transformer cet enregistrement d'écran d'application en un vrai site web » ; les exigences complètes peuvent être remplies dans prompts/convert-video-prompt.md
- Les scripts nécessitent Python 3.9+, ffmpeg, et les scripts ouvrant un navigateur nécessitent également Playwright
Risques
- Les règles limitent l'utilisation à des graphiques SVG plats et à des couleurs unies extraites de la vidéo originale ; les exemples du README concernent tous des animations de texte et de graphiques plats, et le traitement des images réelles n'est pas expliqué
- Le dépôt a été créé le 20 10, sous licence MIT ; les vidéos originales de la galerie ne sont fournies qu'en 480p pour comparaison