Communitygithub.com

motionproof

Créez, construisez et vérifiez des films de motion design (reels, courts-métrages, vidéos de lancement, promos produit, signatures de marque, typos cinétiques, publicités animées) pour qu'ils paraissent conçus par un humain et satisfassent à des contrôles mesurables.

Qu'est-ce que motionproof ?

motionproof est un skill pour agents IA (compatible avec Claude Code, Cursor, Codex, etc.) qui transforme la création de motion design en un processus rigoureux et mesurable. Il va au-delà des simples descriptions subjectives : il impose une idée unique que la marque possède, refuse de répéter les combinaisons des films précédents, construit en HTML brut, HyperFrames ou Remotion, puis valide le rendu à l'aide de scripts automatisés. Ces scripts vérifient la lisibilité, le contraste, les zones de sécurité des plateformes, le temps de lecture, les silences, la fin, les flashs et le volume sonore – le tout basé sur des nombres, pas sur des impressions. Le workflow suit huit étapes strictes, du brief machine à l'annotation finale via un ledger de projet, garantissant que chaque film est original, lisible sur mobile, et passe des portes objectives avant d'être jugé subjectivement.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/producoestiagopaulino-source/motionproof/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 motionproof ?

Vous êtes le réalisateur, le designer et la personne qui vérifie le travail. Vous décidez ce que le film fait croire au spectateur, vous le construisez, puis vous le mesurez comme le ferait un inconnu. Un nombre issu d'un script prime sur votre impression du rendu. SKILL ci-dessous désigne le dossier qui contient ce fichier.

Les commandes sont écrites pour n'importe quel shell. Sous Windows, utilisez python (ou py -3) là où il est écrit python ; les chemins contenant des espaces sont mis entre guillemets. PowerShell n'a pas de && : exécutez une commande par ligne.

Les cinq règles

  1. Une idée que la marque possède. Cachez le logo : si un concurrent pouvait diffuser le même film, recommencez. L'idée vient du matériel propre de la marque (son produit, son geste, son métier, son lieu), jamais de la première association de son nom.
  2. Chaque temps achète une croyance. Écrivez "après ce temps, le spectateur croit ___" pour chaque temps. Si vous ne pouvez pas remplir le blanc, supprimez le temps. Montrez la chose qui se produit, puis dites-la, ne la dites jamais seulement.
  3. Jamais le même film deux fois. Avant de storyboarder, exécutez le ledger. Une piste, un concept ou une sortie répété(e), ou la moitié des axes d'un film récent, est rejeté(e).
  4. Mesuré, puis jugé. Exécutez les scripts ; citez leurs nombres dans NOTE.md. Tout ce qu'un script peut mesurer est une porte. Ce qu'il ne peut pas mesurer, vous le regardez et vous dites que vous l'avez regardé.
  5. Lisible sur un téléphone. Texte assez grand, assez contrasté, à l'intérieur de la zone de sécurité de la plateforme, affiché assez longtemps pour être lu. Le format vertical est le défaut pour les réseaux sociaux, pas une réflexion après coup.

Flux de travail

0. Machine (10 s)

node "SKILL/scripts/doctor.mjs"

S'arrête si ffmpeg est manquant, Node < 22 ou moins de 20 Go de libre. Un navigateur (Chrome ou Edge) n'est nécessaire que pour les films HTML.

1. Brief

Écrivez en quatre lignes : qui regarde, où (plateforme et format), ce qu'ils doivent faire après, ce qu'ils doivent ressentir. Ensuite, la seule chose vraie pour laquelle le film est fait : une fonctionnalité réelle, un résultat réel, un moment réel. Énoncez les hypothèses au lieu de vous arrêter pour poser des questions de routine ; ne demandez que lorsque le brief est vraiment ambigu (quelle marque, quelle plateforme, quelle offre).

2. Trois idées, puis une

Écrivez trois idées de types différents (voir references/direction.md : documentaire d'une tâche, un seul plan fixe, un compte à rebours, un diagramme qui se construit, le voyage d'un objet, un cut match avant/après, et plus). Exécutez le test de cachez-le-logo sur chacune. Choisissez-en une et écrivez pourquoi en une ligne.

3. Ledger

python "SKILL/scripts/ledger.py" suggest --brand "<marque>"
python "SKILL/scripts/ledger.py" check --brand "<marque>" --concept <x> --opening <x> --transition <x> --camera <x> --type <x> --palette <x> --texture <x> --track <x> --exit <x>

Un code de sortie 1 signifie que la combinaison répète un film récent ou rejeté : modifiez les axes qu'il nomme. Le ledger se trouve dans le projet (motion-ledger.jsonl, ou $MOTIONPROOF_LEDGER). Si le projet tient déjà sa propre bibliothèque de films passés, lisez-la aussi.

4. Storyboard (STORYBOARD.md)

Format et préréglage de zone de sécurité (references/formats.md), le sol/la lumière/la texture de chaque acte, le moment héroïque (le cadre qui vaut une capture d'écran), et le tableau des temps : temps en images, rôle (accroche, tournant, preuve, conclusion), ce que le spectateur croit après, ce qui bouge, courbe d'entrée et de sortie (references/motion-catalog.md), comment il passe au temps suivant, et le texte à l'écran avec son temps de lecture minimal (0,5 s + caractères / 17). Si le texte d'un temps ne tient pas dans son temps, coupez des mots, pas du temps.

5. Construire le temps le plus difficile en premier

Choisissez l'adaptateur (references/adapters.md) :

  • HTML brut : copiez templates/film.html et templates/kit.js dans le dossier du film.
  • HyperFrames : conservez sa composition ; les scripts pilotent window.__timelines.
  • Remotion : copiez adapters/remotion/ dans src/ ; utilisez ease(), dur(), safeBox(), readingFrames(), <SafeGuide/>.

Construisez le moment héroïque et sa transition la plus difficile, rendez des images fixes et regardez-les avant de construire le reste :

node "SKILL/scripts/render.mjs" film/index.html --still 0.5,2.2,4.0 --out film/stills      (HTML / HyperFrames)
npx remotion still <Comp> film/stills/f60.png --frame=60                                  (Remotion)

6. Rendu préliminaire et vérifications

node "SKILL/scripts/render.mjs" film/index.html film/draft.mp4 --scale 0.5
node "SKILL/scripts/probe.mjs" film/index.html --zones reels
python "SKILL/scripts/review.py" film/draft.mp4 --zones reels --expect <secondes> --exit-required

probe.mjs lit le DOM en direct (HTML et HyperFrames) : taille L1, contraste L2, zone de sécurité L3, texte tronqué L4, temps de lecture L5 ; il avertit également sur l'aspect diaporama (accroche W3 au-dessus du titre, mise en page W4 diapositive, titre W5 tapé à la machine, barre de progression W6, carte d'interface utilisateur générique W7). Ajoutez --strict-style lorsque le brief demande un cinéma, pas une interface ; un motif qui est l'idée reçoit data-allow-<nom> ou data-ui et une ligne dans NOTE.md (tableau dans references/review.md). review.py lit les pixels de n'importe quel MP4 (également Remotion et fichiers montés) : R1 rendu, R2 silence, R3 fin, R4 flashs, R5 pixels de zone de sécurité, R6 son. Ouvrez sheet.jpg depuis le dossier de révision : les bandes rouges sont les marges de la plateforme. Décrivez chaque image de la planche en une phrase (ce qui est à l'écran, où va l'œil) avant de juger quoi que ce soit.

Corrigez dans cet ordre : faux ou cassé ; l'idée ; les transitions entre les temps ; hiérarchie et échelle ; timing ; surface ; son. Un ÉCHEC est corrigé, jamais argumenté. Un AVERTISSEMENT est regardé, puis soit corrigé, soit expliqué dans NOTE.md.

7. Son

Musique sur la grille : python "SKILL/scripts/beats.py" grid --bpm <bpm> --fps 30 --duration <s> donne les images de temps pour les coupes et les hits. Si un outil sonore est disponible dans l'environnement (une banque d'effets sonores, un outil d'analyse audio), utilisez-le pour choisir et placer les hits. Silence avant le grand hit ; abaissez la musique pendant la lecture. Ensuite :

python "SKILL/scripts/master.py" film/final-raw.mp4 film/final.mp4 --target reels --fade 1.0

8. Vérification finale, note, ledger

python "SKILL/scripts/review.py" film/final.mp4 --zones reels --target reels --expect <s> --expect-audio --exit-required --fade-required
python "SKILL/scripts/beats.py" check --bpm <bpm> --report film/final-review/report.json
python "SKILL/scripts/ledger.py" add --brand "<marque>" --film <nom> <les mêmes axes qu'à l'étape 3>

Écrivez NOTE.md : l'idée et pourquoi ; chaque temps et ce qu'il achète ; ce qui est réel et ce qui est illustratif ; les lignes de porte copiées depuis probe.mjs et review.py ; les descriptions d'images en une phrase ; ce que vous amélioreriez encore. N'écrivez jamais que le film est bon : écrivez ce que vous avez vérifié. Lorsque le spectateur réagit, enregistrez-le : ledger.py verdict --film <nom> --verdict approuvé|rejeté --note "<ses mots>". Une combinaison rejetée est bloquée pour tout film futur.

Ne jamais livrer

  • Un film que personne n'a regardé, ou des portes revendiquées sans les lignes de script.
  • Texte sous l'interface de la plateforme, coupé par le bord du cadre, plus petit que 3,1 % du petit côté, avec un contraste inférieur à 4,5:1, ou disparu avant de pouvoir être lu.
  • Plus de trois flashs en une seconde.
  • Une image fixe finale maintenue au-delà de la limite de maintien final ; une image figée au milieu ; une fin qui s'arrête simplement (utilisez un mouvement de sortie et un fondu sonore).
  • La même piste, le même concept ou la même sortie que le dernier film de la marque.
  • Chrome de page comme décoration : étiquettes de coins, compteurs "01 / 04", timecodes, barres de progression. Autorisé uniquement lorsque c'est l'idée elle-même (une salle de contrôle, un compte à rebours) : alors marquez-le data-diegetic (ou data-ui pour un écran de produit réel) et dites pourquoi dans NOTE.md.
  • Des numéros, témoignages ou interfaces inventés présentés comme réels.

Fichiers

cheminquoi
references/direction.mdbrief, types d'idées, temps et ce qu'ils achètent, transitions, notes de copie portugaise
references/motion-catalog.mdcourbes, durées, décalages, maintiens, comment choisir
references/formats.mdratios d'aspect, zones de sécurité, tailles de police par format
references/sound.mdgrille musicale, hits, cibles de volume sonore, fondus
references/review.mdchaque porte, son numéro, ce qu'elle ne peut pas voir
references/adapters.mdcontrats HTML, HyperFrames et Remotion
data/*.jsonzones, cibles de volume sonore, jetons de mouvement, vocabulaire du ledger (éditez ceux-ci, pas les scripts)
scripts/doctor, render, probe, review, master, beats, ledger
templates/film.html et le runtime kit.js sans dépendances
adapters/aides Remotion et notes HyperFrames

Skills associés