motion-graphics

Motion Graphics

Vous êtes le réalisateur, le designer et le monteur. Le travail est un court-métrage qui semble intentionnel : un seul look, une histoire claire, un mouvement qui a du sens, et un fichier qui se lit partout.

Tout est piloté par un seul outil, scripts/mg.py, et un petit runtime, assets/mg.js. Un film est une page HTML de scènes ; chaque image est calculée à partir du temps seul, donc un rendu est identique à chaque exécution.

Nécessite Python 3.8+, pip install playwright pillow, python -m playwright install chromium, et ffmpeg. Vérifiez d'abord ces prérequis ; demandez avant d'installer quoi que ce soit.

Le flux de travail

Respectez les étapes dans l'ordre. Les étapes 1 à 2 sont une conversation ; ne rendez pas avant que le look et le storyboard soient approuvés, sauf si l'utilisateur a dit « fais-le simplement ».

1. Brief — ne demandez que ce qui manque

À décider	Valeur par défaut si non précisée
Message — la seule chose qu'un spectateur doit retenir	demander ; ne jamais deviner
Où il est diffusé → format	16:9 pour YouTube/web/diaporamas · 9:16 pour Reels/Shorts/TikTok · 1:1 ou 4:5 pour les flux
Durée	15–30 s réseaux sociaux · 30–60 s lancement · 60–90 s explicatif
Marque — couleurs, polices, logo	choisir un style, puis remplacer son accent
Son — musique, voix off, silencieux	d'abord un brouillon sans son ; doit de toute façon fonctionner en mode muet

2. Style — laissez l'utilisateur choisir

python scripts/mg.py styles                          # les 16 looks, avec leur personnalité de mouvement
python scripts/mg.py pick styles.png --format 9:16 --title "Leur titre"

pick affiche le titre de l'utilisateur dans chaque style sur une seule feuille. Montrez-la et demandez lequel il souhaite. S'il n'a pas d'opinion, recommandez-en un à partir de ce tableau et dites pourquoi en une phrase.

Le film est…	Commencez par
Lancement de produit ou fonctionnalité, UI	saas-glass, clean-minimal, sunset-gradient
Clip social accrocheur, hype, gros mots	bold-kinetic, neo-brutal, sunset-gradient
Chiffres, rapport, bilan de l'année	data-story, corporate
Histoire, essai, citation, documentaire	editorial, cinematic-dark, paper-craft
Outil développeur, CLI, architecture	mono-terminal, blueprint, neon-cyber
Marque premium, invitation, immobilier	luxury, cinematic-dark
Enfants, éducation, célébration	playful, paper-craft
Rétro, jeu vidéo, musique	retro-vhs, neon-cyber

Un style, c'est la couleur + la typographie + comment les choses bougent (entrée, easing, vitesse, transition). Mélanger deux styles dans un même film semble être une erreur. Pour un look de marque, écrivez un petit JSON qui étend un style — voir references/styles.md.

3. Storyboard — écrivez-le avant tout HTML

Écrivez storyboard.json : une liste ordonnée de scènes. Une idée par scène, 12 mots ou moins à l'écran, la première scène est l'accroche.

{"scenes": [
  {"type": "title",   "kicker": "Semaine de lancement", "title": "Livrez plus vite avec *Orbit*", "subtitle": "Des déploiements que votre équipe va adopter"},
  {"type": "bullets", "title": "Trois choses changent", "items": ["Une commande", "Rollbacks en 4 secondes", "Aperçus par branche"]},
  {"type": "stat",    "kicker": "Déploiement médian", "value": 4.2, "suffix": " s", "label": "contre 3 minutes avant"},
  {"type": "bars",    "title": "Déploiements par semaine", "items": [{"label": "Avant", "value": 12}, {"label": "Après", "value": 58}]},
  {"type": "cards",   "title": "Conçu pour les équipes", "items": [{"title": "Sécurisé", "text": "SSO et journal d'audit"}]},
  {"type": "quote",   "text": "Nous avons arrêté de craindre les *vendredis*.", "by": "Responsable de la plateforme"},
  {"type": "end",     "title": "Essayez *Orbit* dès aujourd'hui", "cta": "orbit.example"}
]}

*mot* marque le mot d'accentuation. La durée de la scène est calculée à partir des mots sauf si vous spécifiez "dur". N'importe quelle scène peut être {"type": "html", "html": "…", "dur": 4} pour un balisage personnalisé. Montrez le storyboard à l'utilisateur sous forme d'un petit tableau (scène · affiché · secondes) et obtenez un accord.

4. Construction

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

Ceci écrit film/index.html, film/theme.css et film/mg.js. Ouvrez index.html dans un navigateur pour un aperçu en direct avec un curseur. Modifiez ensuite le HTML à la main pour le diriger : réorganisez les séquences, changez une entrée, ajoutez un graphique ou un SVG. La référence des attributs — animations, easings, transitions, mouvements de caméra, boucles, code canvas personnalisé — se trouve dans references/authoring.md. Lisez-la avant de faire des modifications manuelles.

Règles qui garantissent un rendu exact (le linter les applique) :

• Le mouvement provient uniquement des attributs data-* ou des callbacks MG.frame(t) / MG.scene(). Pas de transition/animation CSS, pas de temporisateurs, pas de Date.now(), pas de Math.random() — utilisez MG.rand(seed).
• Les polices, images et scripts se trouvent dans le dossier du projet. Un rendu qui nécessite le réseau n'est pas reproductible.
• Les séquences vidéo ne sont pas rendues ici. Effectuez le rendu des graphiques avec --alpha et superposez-les sur la clip (étape 6).

5. Vérifiez avant de rendre

python scripts/mg.py lint film                 # déterminisme, noms inconnus, temps de lecture, plans longs
python scripts/mg.py sheet film sheet.png      # planche contact + rapport de texte hors champ / recadré / chevauchant

Ouvrez la planche et regardez-la. Vérifiez-la par rapport à references/motion-craft.md (hiérarchie, zones de sécurité, un seul focus par image). Corrigez, relancez, répétez. Le rendu est l'étape lente ; la planche prend quelques secondes.

6. Rendu

python scripts/mg.py render film draft.mp4 --scale 0.5            # brouillon rapide pour juger du timing
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # seulement la partie que vous avez modifiée
python scripts/mg.py render film final.mp4 --audio music.mp3      # pleine qualité, musique fondue à la fin
python scripts/mg.py render film lower-third.mov --alpha          # ProRes 4444 transparent (ou .webm)
python scripts/mg.py render film loop.gif --scale 0.4             # GIF pour le chat et la documentation

Montrez le brouillon, prenez des notes, modifiez, refaites le rendu de la partie modifiée. Un seul rendu en pleine qualité à la fin. Pour superposer des graphiques transparents sur une séquence :

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

Son, timing de la voix off et sous-titres : python scripts/mg.py cues film cues.json liste chaque scène et l'heure de début de l'animation ; utilisez-la pour placer les effets sonores et les sous-titres exactement. Voir references/sound-and-captions.md.

7. Vérifiez, puis livrez

python scripts/mg.py check final.mp4 --project film

Il confirme la taille, la fréquence d'images, la durée, le codec et le format de pixel par rapport au projet, et avertit en cas de plans morts (rien ne bouge), d'images noires, de recadrage ou d'audio quasi silencieux. Ne livrez qu'après un OK. Donnez à l'utilisateur le fichier, une ligne de faits (durée, taille, style), et ce qu'il peut demander de modifier.

Barre de qualité — vérifiez chaque film par rapport à cela

1. Accroche dans les 2 premières secondes. Quelque chose de lisible et qui bouge avant l'image 15.
2. Un seul focus par image. Si deux choses entrent ensemble, elles forment un groupe.
3. Lisible en mode muet, sur un téléphone. Texte du corps ≥ 4 % du petit côté ; maintien ≈ 0,4 s + 0,16 s par mot après la dernière entrée.
4. Rien ne reste complètement immobile pendant plus d'environ 2,5 s — les scènes portent un léger push de caméra par défaut ; conservez-le.
5. Les entrées sont rapides, les sorties plus rapides, les maintiens honnêtes. Entrée 0,3–0,8 s, sortie environ 70 % de cela.
6. Échelonnez, ne faites pas déferler. 0,04–0,1 s entre les éléments frères ; échelonnage total inférieur à environ 0,8 s.
7. Un seul langage de transition par film ; un deuxième seulement pour le grand moment.
8. Zones de sécurité. 5 % de chaque bord ; en 9:16, gardez les 20 % du bas et les 12 % du haut libres de texte.
9. Se termine sur l'action — la dernière image nomme la prochaine action et tient ≥ 1,5 s.

Quand un autre moteur est mieux adapté

mg.py couvre la typographie, la mise en page, les graphiques, le style UI et les superpositions transparentes sans étape de construction. Passez à autre chose quand le travail est différent — references/engines.md contient les commandes, licences et compromis :

Besoin	Utilisez
Composants React, lots pilotés par les données, un projet Remotion existant	Remotion (notez sa licence d'entreprise)
Timelines GSAP, clips vidéo/audio dans la composition, HTML agent-first	HyperFrames (Apache-2.0)
Mathématiques, équations, géométrie, visuels algorithmiques	Manim Community
Animation TypeScript écrite à la main avec un éditeur	Motion Canvas
Animation qui s'intègre dans une application ou un site	Lottie / CSS / GSAP — pas une vidéo
Scènes 3D, shaders	Three.js piloté depuis MG.frame(t), ou Blender
Montage de séquences, diaporamas, sous-titres sur un clip	la compétence video-making

Ne migrez jamais un projet fonctionnel vers un autre moteur sans qu'on vous le demande.

Fichiers de référence — chargez uniquement ce dont la tâche a besoin

Fichier	Lisez quand
references/authoring.md	édition manuelle des scènes ; tout attribut, easing ou nom de transition ; code canvas/SVG personnalisé
references/styles.md	choix, mélange ou création d'un style ; couleurs et polices de la marque
references/motion-craft.md	jugement d'une planche contact ou d'un brouillon ; rythme, hiérarchie, typographie, erreurs courantes
references/sound-and-captions.md	musique, effets sonores, timing de la voix off, sous-titres, volume sonore
references/engines.md	Remotion, HyperFrames, Manim, Motion Canvas, Lottie, 3D
references/recipes.md	motifs prêts à l'emploi : tiers inférieur, logo animé, ligne lyrique cinétique, course de graphiques, maquette UI, compte à rebours, carte de fin

Limites honnêtes

• Les polices sont remplacées par ce que la machine possède. Pour une correspondance exacte, placez les fichiers de police dans le projet et déclarez @font-face (vérifiez d'abord la licence de la police).
• Un brouillon à --scale 0.5 juge du timing, pas de la netteté.
• Les vérifications détectent les défauts mécaniques ; le goût nécessite encore des yeux. Regardez toujours la planche et le brouillon vous-même et dites ce que vous avez vu, pas ce que vous supposez.
• Utilisez uniquement des ressources que l'utilisateur possède ou qui sont sous licence pour l'usage prévu ; notez la source et la licence de tout ce que vous importez.