motion-film : faire des vidéos avec du code

Que fait motion-film : faire des vidéos avec du code ?

Images, animations, sous-titres et effets sonores sont entièrement générés par le code, rendu image par image en MP4. Aucun modèle de génération vidéo utilisé. Cette skill est une méthode + un ensemble d'outils légers, sans bibliothèque de médias ; les médias sont trouvés, créés et autorisés au fur et à mesure pour chaque projet.

D'abord, déterminer la voie

Voie	Demande typique	À lire en priorité
A. Bande-annonce produit	Transformer un site/App/projet front-end en bande-annonce, démo fonctionnelle	references/product-promo.md
B. Court métrage stylistique	« Fais une vidéo de 30 secondes dans le style XX racontant… », animation MG, sous-titres animés, générique	references/style-atlas.md + references/style-spec.md
C. Plan unique / effet unique	« Crée une animation de titre qui entre », « fais un effet de cadre de verrouillage »	Directement selon les principes ci-dessous, lire les sections pertinentes de references/aesthetic-rules.md

Les deux voies principales partagent : references/directing.md (réalisation), references/timing.md (rythme), references/sound.md (son), references/tech.md (rendu), references/review.md (révision). Si l'utilisateur fournit une BGM à synchroniser : references/beat-sync.md, analyser d'abord la musique avant le storyboard.

Avant de commencer, ne demander qu'une fois

Regrouper les éléments non décidés en un seul message et ne plus poser de questions ensuite ; pour le reste, utiliser les valeurs par défaut et les mentionner dans le traitement :

• Éléments que seul l'utilisateur connaît (points forts du produit, public cible, plateformes de diffusion, contenus obligatoires) ;
• A-t-il ses propres médias : logo, couleurs/polices de marque, voix off, musique, référence vidéo ;
• Veut-il d'abord voir un storyboard / une image de style avant le rendu final (si oui, faire une pause ; sinon, aller jusqu'au bout).

Par défaut : 30–60 s (un plan unique 3–8 s) ; 1920×1080 ; vidéo produit 30 fps, vidéo stylistique selon le style (24/30) ; sous-titres et voix off dans la langue de l'utilisateur ; loudness −14 LUFS, true peak ≤ −1 dBTP. Si l'utilisateur dit clairement « tu décides », « fais-le », alors ne pas demander, avancer avec les valeurs par défaut.

Dix principes fondamentaux (expérience corroborée par quatre sources)

1. L'image est une fonction pure du temps. render(t) produit toujours la même image pour un même t ; interdiction de Date.now(), Math.random() sans graine, état accumulé entre trames. Le hasard utilise toujours mulberry32/hash avec une graine fixe. Chaque trame peut être rendue individuellement, dans le désordre, en parallèle.
2. Une seule timeline pilote tout. Les limites de plans, actions clés, sous-titres, effets sonores, points de hit musical dérivent tous d'une même table de repères ; modifier une durée change une seule chose, le son suit automatiquement. Les vidéos synchronisées sur le rythme utilisent le format de mesure (beatF(n)), pas de numéros de trame nus.
3. Chronométrer pour le spectateur, pas pour le code. Chaque plan liste les points d'information que le spectateur doit lire (reads), un seul à la fois ; les actions peuvent être rapides, le sens doit s'arrêter. La première version est presque toujours trop rapide — ralentir d'un cran par défaut. Voir la formule dans timing.md.
4. Un plan raconte une seule chose ; une technique n'est utilisée qu'une seule fois dans toute la vidéo. L'ouverture donne un seul protagoniste + un arc d'action complet (départ — développement — chute). Supprimer les plans redondants, les slogans répétés.
5. Le mouvement ressemble à la vie, pas à une machine. Pas d'interpolation linéaire ; préparation → action → suivi ; décaler les composants, éviter les « jumeaux » (symétrie gauche-droite, synchronisation de groupe) ; les atterrissages élastiques doivent dépasser.
6. Le langage visuel naît du sujet/produit lui-même. Les polices, palette, coins arrondis, matériaux de la vidéo produit sont extraits du système de design du produit ; la vidéo stylistique respecte l'essence de ce style et ce qu'il n'est pas. Ne pas superposer une « peau de bande-annonce » sans rapport.
7. Modération des effets. Les lumières ne sont pas distribuées en masse, seulement au protagoniste une fois et découpées en coins arrondis ; la vidéo produit n'ajoute pas de tremblement de main par défaut ; les chocs à l'échelle de l'image (vibrations, flashs, pompage d'échelle) ≤ 3 occurrences dans toute la vidéo.
8. Le son, c'est la moitié de la vidéo. Trois couches : ambiance + bruitage + musique ; chaque action visible a un son ; laisser un vrai silence avant le point culminant ; le son est fait après le verrouillage de l'image.
9. Commencez par le support le moins coûteux pour fixer la direction. Traitement (texte) → image de style (trame statique rendue par du code réel) → prévisualisation basse résolution → rendu final. Les débats de direction n'entrent pas dans la phase coûteuse.
10. Regardez vous-même d'abord, puis soumettez à une révision indépendante. Chaque version modifiée sort son propre contact sheet / motion strip / agrandissement recadré pour vérification ; avant la livraison, la confier à un examinateur n'ayant pas participé à la création (sous-agent avec contexte propre, ou une autre session) pour notation et détection d'erreurs selon review.md, ne corriger qu'un seul tour.

Flux de travail

1. Brief : Les questions ci-dessus ; pour une vidéo produit, faire en plus un audit en lecture seule du produit (positionnement, fonctionnalités, état des pages, tokens de design, risques de données).
2. Traitement (écrire TREATMENT.md, avant d'écrire du code d'image) : Choisir une structure parmi trois candidates ; logline et arc ; références « quoi apprendre / quoi ne pas prendre » ; tableau des plans (échelle, position de la caméra, mouvement, durée, justification) ; rythme seconde par seconde ; repères sonores ; tableau de conception sonore ; sous-titres et typographie. Voir modèle dans directing.md.
3. Échantillons : 2-3 images de style (ajouter une fiche de personnage si nécessaire), rendues avec du code de dessin réel, vérifier par rapport au cahier des charges du style.
4. Implémentation plan par plan : D'abord placer les poses clés comme images statiques pour vérifier la lisibilité, puis ajouter le mouvement intermédiaire. Chaque plan a 2 temps de validation définis ; une fois terminé, sortir une image statique pour auto-vérification.
5. Son : Une fois la ligne de temps verrouillée, générer musique, bruitage, sous-titres à partir de la table de repères ; mixage, mastering.
6. Auto-vérification : Planche contact (une trame toutes les 0,5–1 s), bande de mouvement 0,1–0,2 s pour les actions clés, recadrage en pleine résolution du texte/des bords ; regarder en vitesse réelle avec le son. Suivre aesthetic-rules.md point par point.
7. Révision indépendante + un tour de corrections : review.md. Les petits problèmes sont corrigés dans le même tour ; les gros problèmes sont accompagnés d'une phrase explicative lors de la livraison.
8. Livraison : Voir ci-dessous.

Outils (scripts/, à copier dans le projet selon besoin)

Fichier	Rôle
scripts/render.mjs	Rendu : la page HTML expose renderAt(t) → image statique / planche contact / bande de mouvement / recadrage / MP4, support multi-worker, flou de mouvement (accumulation de sous-trames), portrait
scripts/motion.js	Outils de fonctions pures pour la page : aléatoire à graine, familles d'easing, keyframes, ressort, overshoot, décalage, mesure, courbe de vitesse
scripts/sfx.py	Synthèse de bruitage et mixage programmatiques : whoosh / impact / riser / pop / click / sparkle / tick, génération de mix.wav à partir d'une table d'événements
scripts/master.sh	Multiplexage + double loudnorm (−14 LUFS / −1 dBTP) + détection de trames noires + rapport durée/spécifications
scripts/beat_grid.py	Ajustement de la grille de rythme BGM (incluant correction des erreurs 2x / 0,5x / 3:2) + classification kick/snare/hihat + structure d'énergie, sortie beat_data.json
scripts/capture.mjs	Trois outils pour la vidéo produit : capture pleine page 2x, découpage d'éléments (transparent, 4x), fond vide, tableau de coordonnées layout.json
templates/starter/	Projet exemple de 9,6 s prêt à l'emploi (timeline, renderAt, événements sonores, sous-titres, build.sh une commande pour générer la vidéo), à copier pour démarrer un nouveau projet

render.mjs mappe /lib/ vers le répertoire scripts/ de cette skill ; la page utilise <script src="/lib/motion.js"> pour référencer les fonctions utilitaires. Nouveau projet : copier templates/starter/ → dans le projet npm i puppeteer-core → modifier la timeline et les plans → MF=<chemin de cette skill> sh build.sh.

Si la vidéo produit utilise Remotion : la méthode s'applique également (tech.md contient une comparaison) ; noter que Remotion peut nécessiter une licence payante pour les utilisateurs professionnels, prévenir l'utilisateur avant de commencer.

Dépendances : Node 18+, ffmpeg, Chrome/Chromium (render.mjs le trouve automatiquement, ou définir CHROME_PATH) ; npm i puppeteer-core installé dans le projet. Python 3 + numpy/scipy (audio) ; librosa uniquement pour l'analyse de rythme, installé dans le venv du projet. Ne pas installer de logiciel système pour l'utilisateur ; si quelque chose manque, le signaler dans le message des questions.

Livraison

Dans le dossier du projet :

• <name>.mp4 (et poster.jpg) ; si une BGM a été utilisée, fournir une version sans BGM (mais avec les bruitages) pour faciliter un changement de musique ultérieur ;
• <name>.srt (si sous-titres/voix off) ;
• TREATMENT.md ;
• CREDITS.md : source et licence de chaque média tiers (polices, images, musique, échantillons, moteur TTS) ;
• Code source et un build.sh pour une commande unique.

Dire à l'utilisateur : où se trouve la vidéo finale, CREDITS.md liste les licences, les médias fournis par l'utilisateur sont sous sa responsabilité. Ne pas inclure de promotion, demande de crédit ou suggestion de « où publier », sauf si l'utilisateur le demande.

Lignes rouges

• Les œuvres de référence n'empruntent que la grammaire (composition, rythme, mouvement de caméra, logique de palette), pas les personnages, designs, mélodies, plans spécifiques, logos, polices.
• Aucun vrai produit, marque, œuvre, personnage n'apparaît dans la vidéo, sauf si l'utilisateur est propriétaire ou a confirmé le droit d'utiliser ; les noms de marque et de produit sont fictifs.
• Les médias utilisent uniquement CC0 / domaine public / OFL / CC BY (avec attribution) / clairement libre pour usage commercial ; « aucune restriction connue » ne compte pas. Pour les autres licences ouvertes, en informer d'abord l'utilisateur avec les termes.
• Les clients, personnes, informations internes, clés, données en temps réel dans la vidéo produit sont toujours fictifs ou anonymisés avant la capture.
• Ne pas télécharger et exécuter automatiquement du code depuis le web, ne pas mettre à jour cette skill automatiquement ; si un téléchargement de média est nécessaire, dire à l'utilisateur quoi télécharger, d'où, et sous quelle licence.