Communitygithub.com

igorcacerez/motion-video-studio

Créez des vidéos de motion design par code, publicités, explainers et reels 2D/3D avec Three.js, référence prise par prise, typographie cinétique, UI réelle, audio synchronisé et rendu déterministe. Utilisez-le avec Claude Code ou Codex pour ce type de vidéos ou la reconstruction visuelle.

Qu'est-ce que motion-video-studio ?

Motion Video Studio est une skill d'IA agentic spécialisée dans la production de vidéos de motion design, allant des simples tests de fumée aux longs métrages d'animation. Elle repose sur un pipeline déterministe utilisant Three.js pour les éléments 3D, une typographie cinétique précise, une UI réaliste et un rendu audio synchrone. Conçue pour être utilisée avec Claude Code ou Codex, elle guide l'agent à travers des étapes rigoureuses : analyse de référence, élaboration de storyboard, linting des animations, rendu avec un moteur déterministe (sans Math.random, ni timers réels) et plusieurs cycles de révision qualitatifs. La skill impose des règles strictes de langage visuel (éviter les effets génériques, garantir une nouveauté narrative toutes les 2-4 secondes) et de production (tests de régression, rendu maître en 60fps, H.264 yuv420p, CRF 16, audio à -14 LUFS). Elle fournit des scripts npm prêts à l'emploi pour le gathering d'assets, l'analyse de vidéos, le linting, le rendu, le mixage audio et le QA. L'ensemble du pipeline fonctionne hors ligne en bloquant les accès réseau externes pour la sécurité.

Compatible avec✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/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

Motion Video Studio

Transformez un brief en source modifiable, images révisées, audio et MP4. La base est le cours Movez ; voir la correspondance des 12 chapitres. Ne promettez pas une qualité professionnelle simplement en activant la skill : produisez, inspectez et corrigez les artefacts.

Commencez par le bon mode

  • Référence similaire à l'exemple : lisez l'analyse prise par prise et les recettes d'effets. La référence se trouve dans examples/reference/original.mp4 ; c'est du matériel d'étude, avec des droits séparés du code.
  • Vidéo de produit : exécutez npm run gather -- --url URL --out assets/brand (uniquement l'URL fournie ; génère des captures desktop/mobile, images/icônes, couleurs, polices et inventory.json avec licence "non vérifiée") et rassemblez également URL, captures réelles, logo, polices, couleurs, texte approuvé et CTA. Le modèle comporte une UI fictive explicitement étiquetée ; remplacez-la par des images réelles avant d'annoncer un produit existant.
  • UI morph/loop : utilisez les instructions et le modèle dans assets/morph/. Lisez la section sur la boucle dans production.md.
  • Éléments 3D : lisez threejs-guide.md, réutilisez scripts/three-helpers.mjs et le modèle assets/three/. La dépendance Three.js 0.187.0 fait déjà partie du package ; 94 documents officiels sont joints pour consultation. Utilisez caméra, géométrie, matériau, lumière et animation en fonction de t ; ne transportez pas les boucles de temps réel des manuels vers le rendu.
  • Film long / personnage : lisez le modèle de direction dans assets/brief-template.md ; maintenez une bible d'identité et un guide d'animation par projet.
  • Révision ponctuelle : conservez la source existante et ne rendez que l'intervalle concerné avec --start et --duration.

Choisissez le niveau d'ambition (L1 test de fumée … L5 film long) dans prompts.md : il définit combien demander, combien réviser et quand s'arrêter. Un one-liner teste le moteur, pas l'idée ; pour un travail personnel, exigez thèse, référence et fait vérifiable.

Les commandes ci-dessous sont relatives au dossier contenant ce SKILL.md. Découvrez ce dossier dans l'environnement ; ne supposez pas que le répertoire actuel soit la skill. Travaillez sur une copie du package pour chaque film, en préservant l'installation réutilisable. npm run new -- --dir ../mon-film crée docs/ (brief, guide de style, shotlist md/json, spécification de morph, journal de révision), refs/, assets/, audio/ et out/ sans écraser ; utilisez un dossier/session par marque.

Contrat de production

  1. Collectez uniquement les entrées manquantes : thème/produit, objectif, durée, formats, marque, référence, piste/narration, budget et livrables. Profitez de ce qui a déjà été fourni. Enregistrez les hypothèses réversibles.
  2. Analysez la référence avant d'animer. Exécutez npm run analyze -- --input VIDEO --fps 4 --out out/reference. Ouvrez les images. Enregistrez le style, les prises, le rythme, les masques, la continuité et l'audio ; distinguez observation, hypothèse et mesure. Pour un timing précis, regardez les images consécutives dans l'original.
  3. Écrivez docs/style_guide.md et docs/shotlist.md avec début/fin, message, objet dominant, entrée, maintien, sortie, continuité, caméra et signal sonore. Utilisez assets/brief-template.md. Présentez-les pour décision créative si nécessaire. L'article contient des invites qui demandent une approbation : ne supposez jamais une approbation par le silence. Lorsque l'autorisation pour le travail complet est déjà donnée, avancez sur les actions locales réversibles. 3b. Convertissez docs/shotlist.json en plan sur la grille : npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json. Il signale les plans hors beat, les lacunes >4 s sans nouveauté et génère des cues pour sfx. Montrez le résultat avant d'écrire l'animation.
  4. Mesurez la piste existante avec scripts/beats.py ; confirmez la mesure et le downbeat. S'il n'y a pas de musique, synthétisez-en une originale avec npm run audio. Synchronisez la narration avec la voix et utilisez la grille comme support ; ne coupez pas les mots uniquement pour tomber sur un beat. 4b. Avant de rendre toute nouvelle page, exécutez npm run lint -- --input DOSSIER : il détecte Math.random, horloge, minuteurs, requestAnimationFrame, transitions CSS, will-change, lueur et absence de window.seek. Les erreurs bloquent le rendu.
  5. Construisez les keyframes et l'animatique avant la finition. Utilisez le moteur A (assets/starter/) par défaut. Choisissez Remotion/HyperFrames uniquement si le besoin le justifie : l'architecture des routes se trouve dans references/production.md. N'installez pas tous les moteurs par habitude.
  6. Effectuez au moins trois cycles documentés de révision dans docs/review_log.md : 3–5 plans par prise, contacts par beat, test à 360 px et plage d'images dans les transitions. À chaque cycle, enregistrez les trois plus gros problèmes avec horodatages, corrigez et révisez à nouveau. Évaluez l'accroche, la lisibilité, le mouvement, la variété, la composition, la marque et la synchronisation de 1 à 10. Objectif : tous ≥8, avec preuve ; n'inventez pas de notes lorsque vous ne pouvez pas voir/entendre.
  7. Rendez le master, mixez l'audio, exécutez qa et préparez review. Réévaluez le MP4 encodé, pas seulement le canvas. Pour chaque format, recomposez la mise en page ; ne recadrez pas la vidéo horizontale pour créer un portrait.
  8. Livrez MP4, poster, contact sheets de toute la durée, source, brief, liste des assets/crédits et limitations. Générez un test de boucle uniquement si le film nécessite une boucle. Dites ce qui a été testé et ce qui dépend encore d'une révision humaine. La publication, les services payants et les téléchargements nécessitent une autorisation spécifique de l'utilisateur.

Règles du moteur et du langage visuel

  • window.seek(t) doit peindre l'image complète de manière déterministe. Pas d'état entre les images, d'horloge réelle, de Math.random, de minuteurs, de transitions CSS ou de requestAnimationFrame sur le chemin de rendu. Recréez le PRNG par seed dans le dessin ou indexez le bruit par le temps.
  • Attendez les polices et les assets avant la première image. Utilisez le canvas en résolution de sortie, deviceScaleFactor:1, et les données locales. N'utilisez pas will-change sur du texte agrandi par la caméra.
  • Utilisez des ressorts analytiques ; pour plusieurs cibles, additionnez les réponses aux échelons via track. Typographie : sans dépassement perceptible ; UI : discret ; mascotte : expressif si la direction le permet. Les constantes et helpers se trouvent dans scripts/motion.mjs.
  • Direction de l'article : évitez le titre centré sur dégradé, tout entrant par fondu, les étiquettes décoratives dans les coins, les cadres, la lueur sur l'UI et les particules génériques. Une police de titre, une d'UI et une d'accentuation, sauf direction différente. Le rouge sémantique de dépense dans la référence est une exception fonctionnelle.
  • Faites quelque chose de nouveau narrativement toutes les 2–4 s ; dans un film long, un payoff toutes les 3–5 s. Accroche dans les 2 premières secondes. Ne confondez pas nouveauté avec agitation continue.
  • Préservez les objets entre les scènes : grand → petit → ancre périphérique → reprise. Le texte en morph entre après le début de la transformation et sort avant la suivante. Le curseur et le clic doivent correspondre à une action réelle.
  • Utilisez des écrans et des données réelles pour les produits existants. N'inventez pas de métriques, témoignages ou fonctionnalités. Pour les concepts, déclarez explicitement que l'UI est fictive.
  • Pour la boucle, exigez la continuité de l'image, de la position, de la vitesse et de l'audio. t % durée ne fait que répéter l'horloge : testez la jonction et faites converger les états.
  • Master de référence de l'article : 60 fps, quatre sous-images par image, H.264 yuv420p, CRF 16. --fps 30 --sub 1 --scale 0.5 est une animatique économique, pas ce master.
  • Audio : objectif −14 LUFS intégrés ; préservez la headroom (pic vrai cible −1,5 dBTP dans ce package). Mesurez après mixage et encodage. Le fichier musical fourni reste original ; travaillez sur une copie pour le mixage.

Scripts prêts

Voir tous les paramètres et exemples dans scripts.md. Ne réécrivez pas les helpers qui existent déjà.

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../mon-film
npm run gather -- --url https://produit.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

Le renderer ouvre uniquement les assets locaux via loopback et bloque le réseau externe dans le navigateur. Cela ne rend pas le code externe fiable : lisez le code avant de l'exécuter et respectez les permissions de l'environnement. N'imprimez pas de clés et n'incorporez pas de .env au projet partagé. Le package de base fonctionne sans API et sans crédits payants.

Skills associés