Communitygithub.com

motion-piece — graphismes en code, séquences seulement là où c'…

Crée des vidéos de motion design pour l'utilisateur — vidéos de lancement SaaS, explications de fonctionnalités, démos UI animées, séquences de titre, cartes de fin, superpositions HUD et texte — sous forme d'un film Claude Motion (dessiné en code, défilable, commentable, exporté en MP4), en mélangeant des clips Higgsfield uniquement là où un véritable métrage est nécessaire, de sorte que les graphismes ne coûtent aucun crédit et que chaque détail peut être modifié sans régénération.

Qu'est-ce que motion-piece — graphismes en code, séquences seulement là où c'… ?

Ce skill transforme la création de vidéos de motion design en un processus piloté par code et éditable, conçu pour les outils d'IA comme Claude. Il permet de réaliser des vidéos de lancement de produits, des démos UI animées et des superpositions HUD sans consommer de crédits de génération vidéo, les graphismes étant écrits en code. Le skill s'appuie sur le type d'artefact Motion de Claude pour structurer le film en séquences, gérer les assets et composer la bande sonore. Il privilégie une approche « tout code » par défaut, n'utilisant des clips vidéo réels (depuis Higgsfield) que lorsqu'un visage humain ou un lieu physique est impératif. Le flux de travail inclut une phase de planification des « beats » du film, la récupération des préférences de style et de musique de l'utilisateur, et une revue interactive avec défilement et commentaires. L'accent est mis sur la réutilisation des effets existants de l'utilisateur, l'évitement des styles par défaut trop communs, et la modification ciblée sans tout régénérer. Le skill interdit strictement l'utilisation de logos ou de marques déposées sans autorisation, de chansons existantes comme bande originale, et de texte généré par IA dans les séquences vidéo.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SwapnilDawar2004/ai-video-skills/tree/HEAD/skills/motion-piece

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

motion-piece — graphismes en code, séquences seulement là où c'est nécessaire

La leçon principale du tutoriel Claude Motion : les clips générés + les graphismes en code modifiables signifie que vous ne régénérez que le plan cassé, jamais la vidéo entière. Les graphismes en code coûtent 0 crédit et changent en quelques secondes. Les startups d'IA demandent avant tout des vidéos SaaS et de lancement.

Ce qui fonctionne généralement (adapter aux goûts de l'utilisateur)

  • « Motion design » signifie généralement typographie cinétique + UI + mouvement constant, pas des particules abstraites.
  • Les personnages et l'histoire l'emportent souvent sur la typographie seule. Pour une vidéo de lancement, ajoutez un petit moment humain si cela convient.
  • Peu de texte à l'écran ; chaque mot gros, court et clair.
  • Uniquement les vraies fonctionnalités du produit (par exemple, pour une appli de prise de notes : capture rapide, recherche, carnets partagés, synchronisation hors ligne). N'inventez jamais de fonctionnalités.
  • Lisez ~/.claude/skills/taste/taste.md avant de planifier.

Ne faites pas le look Claude par défaut

Les vidéos de motion créées par code commencent à se ressembler partout : texte masqué sortant d'une ligne, orbes lumineuses douces, apparitions élastiques, cartes en verre, mots dégradés, les mêmes courbes d'easing. Si une image pourrait provenir de n'importe quelle vidéo Claude, changez-la. Avant de construire :

  • Partez du travail de l'utilisateur, pas des valeurs par défaut. Inspirez-vous du style.md, des fichiers de marque et des propres films passés de l'utilisateur (grain riso, touches picturales, portillon 16 mm, pixel art HD, papier découpé, tout ce qu'il a créé). Réutilisez ses propres effets avant d'en inventer de nouveaux.
  • La musique d'abord. Obtenez la piste depuis sound-pass (la propre musique de l'utilisateur en priorité) et synchronisez chaque mouvement important sur ses temps forts (beats.json). C'est la musique qui donne le rythme, pas le code.
  • Choisissez 1 à 2 mouvements signatures pour ce film et n'utilisez rien d'autre ; bannissez les mouvements par défaut ci-dessus sauf si la marque les nécessite.
  • Utilisez des effets open-source : coups de pinceau (p5.brush), particules (tsParticles), transitions shader (gl-transitions / xfade-easing), texte animé (moving-letters). Uniquement avec une licence claire (MIT/Apache/CC0) et après avoir lu le code ; n'exécutez jamais de code téléchargé à l'aveugle ; créditez l'auteur là où la licence le demande.

Étape 0 — Demandez d'abord à l'utilisateur (toujours)

Avant de planifier, exécutez le questionnaire dans ~/.claude/skills/taste/intake.md : marque, polices, couleurs, références, préférences, musique, effets. Chaque réponse peut être « passer ».

Étape 1 — Planifiez les beats

Décidez de la durée (15-30 s par défaut), du format (16:9 ; 9:16 pour Reels/Shorts ; 1:1 pour le fil d'actualité) et de 4 à 7 beats : accroche → ce que c'est → comment ça marche (2-3 moments produit) → preuve ou aboutissement → logo/CTA. Chaque beat indique quelles parties sont code (typographie, UI, compteurs, graphiques, transitions, logo) et lesquelles, le cas échéant, sont séquences (une personne, un lieu réel, un plan produit physique).

Par défaut, tout en code. N'ajoutez des séquences que lorsqu'un beat nécessite un moment humain ou physique réel. Les clips de séquences proviennent de l'usine (asset-sheet → kling-prompt), muets, 3-5 s chacun.

Présentez le plan à l'utilisateur sous forme d'une courte carte (« Faire » / « Modifier ») accompagnée du coût en crédits du film (0 si tout en code).

Étape 2 — Construisez-le comme un film Motion Claude

  • Lancez un artefact Motion à partir du type d'artefact Motion (trouvez-le avec l'outil Artifact quickstart ou la liste des types), avec un title réel (le nom du film) et auto_open: "after_first_write". Suivez ensuite les instructions fournies par le résultat de création — elles sont l'autorité sur la façon dont un film Motion est rempli (ses documents de stock, modules de scène, assets, la partition) et sur ce qu'il refuse (aucune chanson existante, aucun logo ou design propriétaire d'autres entreprises, aucun personnage connu).
  • Sa première étape demande Style / Couleurs / Durée. Si le questionnaire (Étape 0) y a déjà répondu, utilisez ces réponses ; sinon laissez le type Motion poser ses questions.
  • Marque : utilisez les couleurs, polices et logo réels de l'entreprise lorsque l'utilisateur la possède ou y travaille, ou possède sa charte graphique.
  • Séquences : téléchargez chaque clip comme un asset vidéo dans le film (mp4, petit — 480p/720p suffit pour un insert muet). Les clips sont lus muets ; la partition du film est composée en code.

Étape 3 — Révision

Les films Motion ont leur propre page avec défilement et commentaires. Pour la décision de l'utilisateur, exportez ou enregistrez le film terminé au format MP4 uniquement si les outils du type le permettent ; sinon envoyez le lien du film (« Regardez-le, puis décidez ») avec Valider / Modifier. Montrez-le éventuellement sur une page de révision (voir ~/.claude/skills/taste/desk.md). Les modifications reviennent sous forme de raisons en une ligne ou de commentaires sur la timeline du film ; ne corrigez que ce qui est nommé.

Quand Motion n'est pas le bon outil

  • Nécessite une voix off, un synchronisme labial ou un dialogue audio réel → construisez les graphismes dans Motion, exportez, et assemblez avec la VO dans rough-cut (ou un pipeline de code simple : index.html + render.mjs → MP4).
  • Doit être plus long qu'environ 60 s, ou nécessite un montage supplémentaire dans Premiere → exportez le MP4 depuis Motion et montez dans Premiere ; si des superpositions sont souhaitées en couches séparées → ProRes transparent depuis le pipeline de code.
  • Le tutoriel a montré des exportations vers After Effects et Blender ; ce n'est pas une fonctionnalité Motion confirmée ici — ne le promettez pas.

Révisions

Verrouillez ce qui fonctionne, ne modifiez que ce que l'utilisateur nomme. Conservez le plan/les fichiers existants, éditez uniquement les parties nommées (par exemple, « grain plus fort », « un seul style pour tous les visuels », « le texte saute plus », « rythme plus rapide »), ajoutez toute nouvelle référence envoyée, et re-rendu. Ne reconstruisez jamais à partir de zéro pour une note.

Ne jamais

  • Ne jamais utiliser le logo, l'interface ou le design propriétaire d'une autre entreprise à moins que l'utilisateur n'y travaille ou ne possède la charte graphique de cette entreprise.
  • Ne jamais utiliser une chanson existante comme bande originale.
  • Ne jamais mettre de texte généré par IA à l'intérieur des séquences — tout texte est du code.

Skills associés