Motion Craft Kit
Source : github.com/iart-ai/motion-skills — 14 packs open-source, 51 compétences, licence MIT. Ceci est une référence consolidée unique. Les 14 packs originaux s'installent séparément via
npx skills add iart-ai/<nom-du-pack>ou en tant que plugins Claude Code. Cette compétence couvre l'ensemble du domaine pour avoir la carte en un seul endroit.
INFORMATIONS
| Dépôt | iart-ai/motion-skills (amont, MIT) |
| Consolidé par | V4TIME — V4SKILL |
| Ce que c'est | 51 compétences de motion-design/animation/vidéo pour agents d'IA de codage, réorganisées |
| Format | Compétence de référence — se lit comme un manuel, un seul SKILL.md |
| Installer les packs originaux | npx skills add iart-ai/tiktok-video-skills etc. |
| Quand l'utiliser | Toute demande impliquant du motion-design, de l'animation, de la production vidéo, du motion web, de la visualisation de données, de la 3D/WebGL, de l'animation mathématique ou de l'activité freelance en motion |
Thème Principal
Apprendre à un agent d'IA de codage à produire du motion-design, de l'animation et de la vidéo sur l'ensemble du pipeline — d'un clip TikTok basé sur un accroche à un arrière-plan de shader WebGL, d'un explicateur narré à un document de système de marque. La collection couvre 14 domaines, chacun avec son propre pack installable, et partage une structure commune : chaque compétence est un SKILL.md autonome + un dossier references/ qui enseigne un workflow. Les compétences qui produisent un artefact visuel intègrent une boucle de livraison et de vérification ainsi qu'une petite boîte à outils scripts/.
Le fil conducteur : le motion comme savoir-faire, pas comme magie. Chaque pack est ancré dans une technique de production réelle — principes de timing/easing, coupes précises à l'image, synchronisation avec le beat, discipline 60fps, spécifications de plateforme, accessibilité — pas seulement "faites-le animer".
Thèmes Clés Principaux
-
La vidéo verticale courte est une grammaire distincte. Accroches, interruptions de motif, rythme, montage pour la rétention, légendes synchronisées au mot, tiers inférieurs, chronomètres — le 9:16 est un langage en soi, pas juste "une vidéo tournée sur le côté".
-
Les données pilotent le mouvement. Courses de graphiques, compteurs incrémentaux, infographies animées, récapitulatifs de type "wrapped", créations publicitaires générées en lot à partir de CSV — le mouvement est une fonction des nombres, rendu exact sur chaque image.
-
La typographie cinétique est le texte en tant que mouvement. Décalages de caractères/mots/lignes, révélations de texte fractionné, transitions de poids de police variable, texte sur un chemin, cartes de paroles/titres — le texte ne reste pas immobile, il performe.
-
Le motion web vit ou meurt à 60fps et avec l'accessibilité. Animer uniquement
transform/opacity, éviter les sauts de mise en page, respecterprefers-reduced-motionavec dégradation progressive, transitions de pages dans Next.js App Router, micro-interactions, tracés SVG, lecture Lottie. -
La 3D/WebGL est une piste séparée. Shaders fragment GLSL, scènes Three.js/R3F, systèmes de particules — liés au GPU, conscients des fuites mémoire, déployés comme arrière-plans et effets, pas comme le produit entier.
-
L'animation mathématique est un métier à part. Manim CE — Scènes, Mobjects, morphing LaTeX, ValueTrackers, caméra 3D mobile — pour les vidéos éducatives à la 3Blue1Brown et les visualisations d'équations.
-
L'animation cartographique éditoriale est la géographie comme narration. Zooms de caméra, itinéraires dessinés, épingles placées, surbrillance de régions, le bégaiement 12fps — style Vox, à partir de Google Earth Studio ou GeoJSON/SVG.
-
Le motion de marque est un système, pas un coup unique. Jetons d'easing/timing, bibliothèques de mouvement, règles de logo, normes d'accessibilité — créé une fois, référencé partout.
-
Le motion freelance est un business. Briefs, tarification, limites de révisions, spécifications de livraison, directives de marque — le back-office qui maintient un motion designer ou un studio à flot.
-
Chaque compétence visuelle intègre une boucle de vérification. Geler une image, créer une planche contact, sonder le MP4 encodé — l'agent confirme sa propre sortie avant de la rendre. Les compétences web rendent du HTML autonome ; les compétences vidéo rendent via Remotion ou Manim.
Les 51 Compétences — Consolidées, Réorganisées, Réécrites
Organisées par workflow, pas par pack d'origine. L'ordre est modifié. Les explications d'environ la moitié sont réécrites de zéro ; le reste est condensé à partir des descriptions README originales.
A. Vidéo Verticale Courte (TikTok / Reels / Shorts)
1. short-form-video
Ce qu'elle fait : La grammaire structurelle de la vidéo verticale 9:16 — accroches qui survivent au balayage, interruptions de motif qui réinitialisent l'attention, rythme qui maintient la rétention, et structures de modèles réutilisables que vous pouvez re-skinner. Enseigne le problème des 3 premières secondes comme une contrainte de conception, pas un sentiment vague.
Quand elle s'active : En faisant un Reel/TikTok/Shorts, en construisant un modèle réutilisable pour format court, en montant pour la rétention, en corrigeant des ouvertures faibles, en resserrant le rythme, en créant une boucle sans couture.
2. caption-animation
Ce qu'elle fait : Légendes de style karaoké synchronisées au mot à partir d'une transcription ou d'une voix off — timing de pop par mot, surbrillance du mot actif, placement dans la zone de sécurité pour que les légendes n'entrent jamais en collision avec l'interface de la plateforme. Génère des légendes incrustées ou fournit le tableau de mots temporisés pour alimenter un autre moteur de rendu.
Quand elle s'active : En transformant une voix off en légendes mot par mot de style Hormozi, en incrustant des sous-titres sur un clip, en ajoutant des légendes animées à un Reel.
3. countdown-video
Ce qu'elle fait : Chronomètres précis à l'image, sans dérive, avec mouvement de retournement/roulement des chiffres et une durée configurable — écrans "démarrage imminent", comptes à rebours de lancement/vente, compteurs animés qui atterrissent sur zéro à l'image exacte. Résout le problème de dérive qui brise la plupart des implémentations naïves de minuteurs.
Quand elle s'active : En construisant un compte à rebours, un écran "démarrage imminent", un compte à rebours de lancement, un compteur animé qui doit se terminer sur zéro.
4. lower-thirds
Ce qu'elle fait : Tiers-inférieurs propres et de marque pour nom/rôle avec animation d'entrée/sortie par étapes — modélisés pour que vous puissiez faire passer toute une liste de personnes avec le même look et des noms différents. Inclut le placement dans la zone de sécurité et le verrouillage de marque (couleurs, police, placement du logo).
Quand elle s'active : En créant des tiers-inférieurs animés, des étiquettes de nom, des superpositions d'intervenants, des titres de style broadcast pour une liste de personnes.
5. text-message-animation
Ce qu'elle fait : Anime une conversation de chat — les bulles apparaissent une par une, les indicateurs de frappe clignotent, les sons d'envoi tombent sur le beat, le fil de discussion défile automatiquement — à travers les esthétiques iMessage/WhatsApp/SMS, rendu à partir d'un tableau de messages ou d'un CSV pour qu'un modèle produise des vidéos à l'infini.
Quand elle s'active : En faisant une fausse vidéo de message texte, une histoire iMessage, un clip de conversation WhatsApp/SMS, une animation de réponse de chat, en générant des vidéos de messages texte à partir d'un CSV.
B. Podcast / YouTube / Long Format
6. audiogram
Ce qu'elle fait : Transforme un clip de podcast, une voix off ou une citation en une vidéo avec forme d'onde sous-titrée dimensionnée pour Reels/TikTok/Shorts/publications de fil d'actualité — forme d'onde réactive, barre de progression optionnelle, légendes, sortie carrée ou verticale. Le fil visuel piloté par l'audio est le produit, pas une décoration.
Quand elle s'active : En faisant un audiogramme, en transformant un podcast en vidéo, en ajoutant une forme d'onde animée à une voix off, en exportant une citation de podcast vers les réseaux sociaux.
7. youtube-intro-outro
Ce qu'elle fait : Construit un générique d'intro de marque de 3 à 5 secondes et une outro d'écran de fin de 20 secondes qui respecte les zones d'éléments cliquables de YouTube (bouton d'abonnement, carte de vidéo suivante, etc.) comme des contraintes de conception, pas des après-pensées. Modèle réutilisable où seuls le nom/logo/couleurs/générique changent par chaîne.
Quand elle s'active : En faisant une intro YouTube, un bumper de chaîne, un générique de logo, une outro, un écran de fin, une carte de fin avec espace pour l'abonnement/la vidéo suivante.
C. E-Commerce / Produit
8. product-demo-video
Ce qu'elle fait : Transforme des captures d'écran statiques de produit/application en une démo animée soignée — cadres d'appareil, curseur + clic synthétique, zoom sur une région, légendes de fonctionnalité — pour qu'une simple capture d'écran devienne une visite guidée sans enregistreur d'écran. Contrôle image par image de ce que le spectateur voit et quand.
Quand elle s'active : En faisant une démo de produit, une visite guidée d'application/SaaS, une vidéo d'annonce de fonctionnalité à partir de captures d'écran, en encadrant chaque écran dans une fenêtre de navigateur.
9. promo-video
Ce qu'elle fait : Spot de vente percutant de 6 à 15 secondes — révélation de remise, barre de prix était→maintenant, code promo, compte à rebours, appel à l'action — généré en lot pour de nombreux produits à partir d'un tableau de données pour qu'un modèle rende N promos avec les prix extraits des données. Conçu pour le Black Friday / les ventes flash où le volume compte.
Quand elle s'active : En créant une vidéo de vente/promo/révélation de remise/Black Friday/vente flash, en générant des promos en lot à partir d'un CSV d'offres.
10. photo-slideshow
Ce qu'elle fait : Transforme un dossier de photos en une vidéo finie — mouvement Ken Burns par photo, transitions synchronisées au beat, ratios d'aspect mixtes gérés, légendes par-dessus. Les photos ne sont pas seulement coupées ; elles bougent avec intention.
Quand elle s'active : En transformant des photos en diaporama/montage/vidéo récapitulative avec musique, mouvement Ken Burns synchronisé sur une piste.
D. Publicités / Marketing
11. ad-creative-video
Ce qu'elle fait : Un modèle de publicité piloté par les données × un CSV = N variantes adaptées au message, exportées à chaque ratio d'aspect de placement (9:16, 4:5, 1:1, 16:9) pour les tests A/B. Le contenu créatif est paramétré pour que l'accroche, le corps, l'appel à l'action et l'offre proviennent tous de la ligne de données.
Quand elle s'active : En faisant une vidéo publicitaire, en générant des variantes d'annonces à partir d'un tableau de données pour des tests A/B, en exportant une annonce vers plusieurs ratios d'aspect pour Meta/TikTok/Reels/YouTube.
12. launch-video
Ce qu'elle fait : Films de lancement de produit / hype à haute énergie — accroche → tease → révélation → montage de fonctionnalités → appel à l'action sur la carte de fin, coupé au beat. La structure est un modèle ; l'énergie est la variable que vous ajustez.
Quand elle s'active : En construisant une vidéo de lancement de produit de 30 secondes, une bande-annonce hype, une révélation synchronisée au beat, un film d'appel à l'action sur carte de fin.
13. testimonial-video
Ce qu'elle fait : Clips de citation/avis animés avec révélations de lignes décalées, emphase sur les phrases clés, notes par étoiles fractionnaires et un bloc auteur — transforme une liste d'avis clients en une vidéo de preuve sociale chacun, verrouillé à la marque.
Quand elle s'active : En transformant des avis clients en clips de témoignage animés, des vidéos de citation avec notes par étoiles, une vidéo de preuve sociale à partir d'une liste d'avis.
E. Explicatif / Éducatif
14. explainer-video
Ce qu'elle fait : Transforme un message en une courte vidéo narrée et rythmée de 30 à 90 secondes — script → storyboard → construction de scène → synchronisation narration/légende → montage → polissage. Le pipeline complet, pas seulement une étape de rendu. Gère l'écart entre le script et l'écran que la plupart des outils de motion ignorent.
Quand elle s'active : En faisant un explicatif, un comment ça marche, un tutoriel d'intégration ou un clip concept ; en transformant une fonctionnalité en un clip narré de type "comment ça marche".
15. wrapped-video
Ce qu'elle fait : Construit des récapitulatifs de style "Spotify Wrapped" — un modèle × un tableau de données → de nombreuses vidéos 9:16 personnalisées, chacune remplie à partir d'une ligne. Le modèle tient ; les données varient par utilisateur.
Quand elle s'active : En construisant une vidéo de bilan annuel de type Spotify Wrapped à partir d'un CSV d'utilisateurs, des vidéos de statistiques par utilisateur.
16. diagram-animation (réécrit)
Ce qu'elle fait : Révèle les diagrammes et graphiques au fil du temps au lieu de les montrer en entier — révélations progressives de nœuds/arêtes, connecteurs qui se dessinent, barres qui grimpent, compteurs qui augmentent. Le spectateur lit le diagramme pendant sa construction, pas comme une image statique qui apparaît soudainement. Gère les diagrammes d'architecture, les organigrammes et les graphiques de données de la même manière : divulgation progressive.
Quand elle s'active : En animant un diagramme, un organigramme, une architecture ou un graphique étape par étape ; en révélant nœud par nœud ; en faisant grimper des barres et en incrémentant des nombres.
17. whiteboard-animation (réécrit)
Ce qu'elle fait : Explicateurs de style "VideoScribe" dessinés — une main esquisse des illustrations et de l'écriture manuscrite sur un tableau, trait par trait, rythmé sur la narration. La révélation est le mouvement ; la main est le dispositif. Pas un substitut à un bon contenu, mais le mécanisme de livraison qui fait qu'une illustration de base ressemble à une leçon qui se déroule.
Quand elle s'active : En faisant un explicatif de style tableau blanc, une animation dessinée, des illustrations esquissées à la main rythmées sur la narration.
18. isometric-animation (réécrit)
Ce qu'elle fait : Scènes isométriques / 2.5D — couches empilées, blocs extrudés, diagrammes explosés, grilles isométriques avec révélations décalées et dérive de caméra. Donne une troisième dimension à un diagramme plat sans passer par de la 3D complète ; la caméra dérive, les couches se séparent, le spectateur reçoit des indices de profondeur sans pipeline WebGL.
Quand elle s'active : En construisant des scènes isométriques/2.5D, des diagrammes en couches empilées, des vues explosées, des grilles isométriques avec révélations décalées et dérive de caméra.
19. manim (réécrit)
Ce qu'elle fait : Construit des animations mathématiques/physiques/informatiques en Python avec Manim Community Edition — Scènes et Mobjects, primitives d'animation, morphing d'équations LaTeX/MathTex, graphiques et mise à jour (ValueTracker), 3D et caméra mobile, rendu en ligne de commande vers MP4/GIF avec une boucle de vérification "rendre une image d'abord". La chaîne d'outils 3Blue1Brown, mise à la disposition d'un agent qui peut écrire le code de la scène.
Quand elle s'active : En faisant une animation mathématique, en animant une équation, en utilisant Manim, en faisant une vidéo de style 3Blue1Brown, en traçant et en animant une fonction, en faisant muter une formule en une autre, en rendant une surface 3D avec une caméra en orbite.
F. Typographie Cinétique
20. kinetic-typography
Ce qu'elle fait : Anime le texte à travers CSS, GSAP SplitText, Framer Motion et Remotion — décalages de caractères/mots/lignes, révélations de texte fractionné, transitions de poids de police variable, texte sur un chemin, cartes de paroles/titres. Le texte est le sujet du mouvement, pas une étiquette posée sur autre chose.
Quand elle s'active : En animant un titre, en faisant une vidéo de typographie cinétique, en créant une carte de titre animée, une révélation de texte fractionné, un décalage de texte par caractère/mot/ligne, en faisant une vidéo de paroles ou de légendes, en animant un poids de police variable, en mettant du texte sur un chemin.
G. Animation Web
21. gsap-web
Ce qu'elle fait : Motion web piloté par le code avec GSAP — timelines, ScrollTrigger, SplitText, Flip et synchronisation Lenis pour le défilement fluide. L'outil de timeline standard de l'industrie intégré dans une page web, pas un plugin fermé.
Quand elle s'active : En construisant des animations web pilotées par le défilement, des héros ou des révélations de texte avec GSAP ; en épinglant une section héros qui parcourt une timeline au défilement.