raymond9703/AgentMotion

AgentMotion — Framework unifié de génération vidéo par code

Transformez « une phrase » en un MP4 entièrement dessiné par du code. Cette compétence est la couche d'orchestration : elle vous aide à choisir le backend, le style, à suivre le flux de travail et à effectuer le contrôle qualité. Les connaissances spécifiques de dessin se trouvent dans references/ et styles/.

Invariants fondamentaux (communs à tous les backends)

**Chaque image est une fonction pure du numéro d'image : frame = f(t). ** Pas de Math.random() (utilisez un aléatoire à graine), pas de Date.now(), pas d'accumulation d'état via rAF. C'est la condition préalable à un rendu déterministe, une sortie d'images en parallèle et une auto-vérification image par image. Si vous enfreignez cette règle, le rendu et l'aperçu ne correspondront pas.

Première étape : Choisir le backend (arbre de décision)

Scénario	Backend	Référence
Court métrage (≤60s), aucune ressource externe, illustration/dessin à la main/stylisé	Fichier HTML Canvas unique	references/backends.md §1
Piloté par les données, personnalisation en masse (une vidéo par donnée), incrustation de sous-titres/voix off, écosystème 3D/tableaux	React + Remotion	references/backends.md §2
Animation interactive lue directement dans le navigateur (pas besoin de MP4)	Fichier HTML unique, livraison HTML au lieu de rendu	references/backends.md §3

En cas de doute, choisissez Canvas fichier unique : le moins de dépendances, le plus facile pour l'agent d'écrire correctement du premier coup.

Deuxième étape : Choisir un style

Consultez styles/recipes.md (15 recettes de style commerciales : palettes / techniques clés / lois du mouvement / pièges à éviter). Si l'utilisateur ne sait pas quel style choisir, laissez-le choisir ou recommandez-en un en fonction du thème. Par défaut, ne réutilisez pas la même esthétique et la même musique pour deux vidéos différentes.

Troisième étape : Flux de travail standard (ne pas s'arrêter en cours de route pour demander)

1. Lire le brief : Déduire le type de vidéo (histoire/explication/récapitulatif/boucle/données), la durée (par défaut 15-20s), le format d'image (par défaut 1920×1080 ; pour les vidéos de partage de données, utilisez 1080×1920). La langue des sous-titres suit la langue de l'entrée utilisateur.
2. Storyboard : Définir d'abord le BPM et les données des sections (SECTIONS/SHOTS/EVENTS). Les visuels et la musique lisent les mêmes données temporelles, garantissant un alignement naturel entre l'image et le son (references/storyboard.md).
3. Construire le squelette : Copier depuis templates/starter.html (backend Canvas), remplacer la palette et le dessin du monde. Respecter le contrat : la page expose window.C2V = { fps, frames, width, height, draw(frame) }, où draw est une fonction pure.
4. Auto-vérification puis rendu (l'ordre ne doit pas être inversé) :

node scripts/render.mjs film.html sheet.jpg --sheet 1          # 1 image/seconde en planche, sauter les coupures
node scripts/render.mjs film.html still.png --stills 0,90,300  # Images fixes à des moments précis
node scripts/env-check.mjs                                      # Vérification de l'environnement
node scripts/render.mjs film.html out.mp4 --audio music.mp3     # Rendu complet (musique optionnelle)
node scripts/probe.mjs out.mp4 1920x1080 30                     # Vérification des paramètres d'encodage

5. Deux tours d'inspection visuelle (references/qc.md) : ① Conformité au storyboard — capturez des images à chaque battement d'action de chaque plan et comparez avec les lignes du storyboard. ② Tour du réalisateur — examinez la contact sheet, évaluez le rythme, la diversité des plans, les images mortes, et si chaque action a un son. Au moins deux tours. Ne refaites le rendu que de l'image que vous modifiez.
6. Livraison : MP4 + HTML (le HTML peut être lu directement dans le navigateur). À la fin, fournissez une ou deux options de modification : changer de style, changer de musique, modifier la durée.

Pour le rendu et la vérification avec le backend Remotion, utilisez npx remotion still → inspection visuelle → npx remotion render (voir references/backends.md §2).

Règles anti-échec (les plus fréquentes)

• Fonction pure. Toute accumulation d'état entraînera des erreurs d'images dans le rendu parallèle.
• Les lignes dessinées à la main doivent « bouillonner » et non « trembler » : changez la graine de wobble toutes les 4 images (≈7,5 fois/seconde), un changement par image donnera l'impression d'un bruit.
• Utilisez des ellipses et des rectangles arrondis pour les corps, évitez les polygones qui ressemblent à des panneaux de signalisation.
• Ordre de dessin explicite de l'arrière vers l'avant : la plupart des « visages cachés » sont dus à un problème d'ordre de dessin.
• Le texte ne doit jamais entrer en collision : réservez de l'espace (claim) pour les blocs de texte et les objets clés, vérifiez la mise en page image par image avant la livraison.
• Les points de coupe et d'action doivent tomber sur le temps fort, et le saut de volume ne doit pas dépasser +6dB, sinon cela donnera l'impression d'une surprise (references/audio.md).

Plan du projet

Fichier	Contenu
scripts/render.mjs	Cœur du rendu déterministe : MP4 / images fixes / contact sheet, parallélisation multi-workers
scripts/env-check.mjs / probe.mjs	Vérification de l'environnement / Validation de l'encodage MP4
templates/starter.html	Squelette image=f(t) : contrat, aléatoire à graine, easing, caméra, temps forts
styles/recipes.md	15 recettes de style prêtes à l'emploi (niveau code)
references/*.md	Flux de travail / Storyboard / Techniques / Contrôle qualité / Musique / Sélection du backend
examples/hello-drop.html	Exemple minimal exécutable immédiatement

Dépendances

Node 18+, ffmpeg (accessible dans le PATH), Chrome ou Edge ; npm i playwright-core (à installer dans votre répertoire de projet, pas dans celui de cette compétence).