Communitygithub.com

Motion Proof

Créez des vidéos de lancement et des motion graphics (15 à 60 s) avec du code en Remotion, en appliquant des règles de mouvement de motion designer et des contrôles automatiques (images bloquées, écrans noirs, volume, qualité web) pour que le résultat ne ressemble pas à de l’IA.

Qu'est-ce que Motion Proof ?

Ce skill vous permet de créer des vidéos animées professionnelles avec Remotion en respectant des règles de motion design strictes. Il garantit que le rendu final ne donne pas l’impression d’avoir été généré par une IA, en imposant des courbes de mouvement naturelles, des pauses respiratoires et une vérification image par image. Le processus inclut la rédaction d’un script visuel, l’animation avec une seule configuration centralisée, le rendu en H.264, l’ajustement audio à -14 LUFS, et des mesures automatiques (images bloquées, écrans noirs, volume, qualité web). Il prend en charge les formats 16:9, 9:16 et 1:1, avec une réorganisation verticale et carrée par un nouveau cadrage, non par recadrage. Les scripts fournis (medir.mjs, cuadros.mjs, unir.mjs, volumen.mjs, web.mjs) automatisent la mesure de la qualité, l’extraction d’images clés, le mixage audio, le contrôle du volume et la conversion pour le web.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/germangalo97/motion-proof/tree/HEAD

Demander à votre IA préférée

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

Documentation

Que fait Motion Proof ?

Vous allez réaliser des vidéos animées avec du code : chaque image provient d’un programme (Remotion, qui utilise React). Ce qui distingue une vidéo « à l’air IA » d’une vidéo professionnelle se joue presque toujours à deux endroits : le mouvement (courbes, rythme, pauses qui respirent) et la vérification (examen image par image et mesures). Ce skill vous apporte les deux.

Avant de commencer

  1. Vérifiez les outils : node --version (20 ou plus) et ffmpeg -version. Pour la version web, il faut un ffmpeg avec libvmaf (ffmpeg -filters doit lister libvmaf).
  2. S’il n’y a pas de projet Remotion, créez-le avec npx create-video --yes --blank mon-video et ajoutez les skills officiels avec npx remotion skills add. Utilisez ces skills pour les questions sur l’API Remotion.
  3. Dans remotion.config.ts, ajoutez Config.setColorSpace("bt709");. Sans cela, la vidéo sort en gamme complète (yuvj420p) et certains lecteurs modifient les couleurs.
  4. Copiez plantilla/movimiento.ts dans le projet (par exemple dans src/lib/movimiento.ts) et regardez plantilla/Ejemplo.tsx pour le motif : entrées échelonnées avec ressort, dérive, poussée de caméra, clic et flou de mouvement.
  5. Les programmes de scripts/ s’exécutent avec node <dossier de ce skill>/scripts/<programme>.mjs. Ils n’installent rien.

Le processus

  1. Brief. Quel est le produit, pour qui, que doit faire le spectateur à la fin, formats (16:9, 9:16, 1:1) et durée. Si quelque chose d’important manque, demandez avant de continuer.
  2. Script visuel avec referencias/guion-visual.md : scènes avec image de début et de fin exactes totalisant la durée complète. N’animez pas tant que l’utilisateur ne l’a pas approuvé.
  3. Un seul fichier de configuration avec textes, nombres, couleurs et timings. Un changement de texte doit être une ligne, et les timings sont lus par l’image et le son à partir du même endroit.
  4. Animer en suivant referencias/movimiento.md. Lisez d’abord la liste « Ce qui trahit l’IA ».
  5. Images de test (npx remotion still ou renderStill) à chaque changement de scène et à chaque mouvement de caméra. Regardez-les avant le rendu complet. Approcher la caméra d’un point pousse vers l’extérieur ce qui est loin de ce point : toute édition de caméra se vérifie sur les images.
  6. Rendu en H.264 (yuv420p, bt709) à 60 images par seconde. Le vertical et le carré sont reconstruits avec une autre mise en scène, ils ne sont pas recadrés depuis l’horizontal.
  7. Son avec referencias/sonido.md : unir.mjs pour ajouter la musique et volumen.mjs pour la régler à −14 LUFS.
  8. Mesurer avec medir.mjs. En cas d’échec, la vidéo est corrigée. Le mesureur n’est modifié que si l’échec est faux et qu’une mesure le prouve ; dans ce cas, dites-le dans la livraison.
  9. Vérifier à l’œil avec cuadros.mjs (feuille d’images) et la liste de referencias/revision.md.
  10. Version web avec web.mjs, si un fichier léger est nécessaire.
  11. Livrer les mp4, la mesure et ce qui n’a pas pu être vérifié (par exemple, si personne n’a écouté le son).

Règles fixes

  • Chaque image provient uniquement du numéro d’image, qui peut comporter des décimales à cause du flou de mouvement. Pas de useState, setTimeout, transitions CSS ni Math.random() sans graine fixe.
  • La typographie est chargée avant la première image. Une image en Times New Roman est une erreur.
  • Rien ne bouge en ligne droite ni à vitesse constante, et rien ne reste totalement immobile.
  • Un texte important reste au moins 1,5 s à l’écran. Un compteur monte en environ 1 s.
  • Rien ne sort du cadre, sauf s’il sort délibérément.
  • Ce qui n’a pas été vérifié est dit avec ces mots.

Commandes

node scripts/medir.mjs video.mp4 --ancho 1920 --alto 1080 --fps 60 --duracion 30 --informe medicion.json
node scripts/cuadros.mjs video.mp4 hoja.png --cantidad 12
node scripts/cuadros.mjs video.mp4 cambios.png --segundos 4.5,9,15.2,22
node scripts/unir.mjs video-mudo.mp4 musica.wav con-sonido.mp4
node scripts/volumen.mjs con-sonido.mp4 final.mp4
node scripts/web.mjs final.mp4 web.mp4 --poster poster.jpg --segundo 28

medir.mjs se termine avec le code 0 si tout est conforme et 1 sinon, et liste chaque défaut en texte. cuadros.mjs produit une image que vous pouvez ouvrir pour vérifier plusieurs moments de la vidéo d’un coup. Ajoutez --mudo à medir.mjs pour une vidéo sans son.

Skills associés