Design de motion graphics en rouleau horizontal : langage visuel, implémentation AE et méthode de reproduction

Cette compétence est issue d’une reproduction frame par frame complète (1920×1080, 24 fps, 272 images, 12 versions itératives). Elle répond à trois questions : À quoi ressemble ce type de vidéo et comment il bouge ; Comment le construire dans After Effects ; Comment mesurer et caler une vidéo de référence. Les trois parties peuvent être utilisées indépendamment : pour la création originale, référez-vous aux sections 1–3 ; pour le montage du projet, section 4 ; pour la reproduction, sections 5–6.

Si le projet actuel contient un dossier rollback-replica/, c’est l’implémentation de référence : 拆解分析.md contient toutes les valeurs mesurées, scripts/ est le générateur de scènes, tools/ les scripts de mesure. Lisez-les d’abord, ne réécrivez pas tout de zéro.

1. Langage visuel

1.1 Monde et caméra

Tout le contenu est disposé sur une longue bande horizontale (la référence fait 11000×1080), le spectateur voit la caméra se déplacer sur cette bande.
La caméra ne fait que des translations horizontales et des zooms, pas de rotation ni de mouvement vertical. Conversion : X_écran = (X_monde − cx)·s + 960, Y_écran = (Y_monde − 540)·s + 540.
Une règle graduée traverse toute la bande et reste toujours centrée verticalement (y=540, petits traits espacés d’environ 7,27 px, un grand trait tous les 5 petits). C’est l’axe de la mise en page et la référence pour la caméra.
Pas de flou de mouvement : même un plan avec un déplacement horizontal de 500 px par image reste net, ce qui donne à ce style son aspect « dur ».

1.2 Mise en page

Un axe : le contenu est disposé de part et d’autre de la règle ; les années et numéros sont collés à la règle comme des coordonnées.
Réel en haut, reflet en bas : la règle sert de miroir : en haut, les images originales et le texte à l’endroit ; en bas, leur silhouette monochrome et le texte inversé.
Numérotation entre parenthèses : toutes les annotations sont entourées de parenthèses, (1) (2), (crash), [cloud1] ; les mots entre parenthèses sont souvent en contour vide.
Contraste d’épaisseur : des lignes fines de 1 px (cercles fins, arcs, lignes de repère) face à de grandes zones de couleur pleine.
Cadres imbriqués : cadres noirs dans des cadres noirs, tournés à 90°, la règle passant au milieu.
Rythme de densité : espacement → dense → très dense → vide → rempli → espacement. Pas de densité constante.

1.3 Couleurs

Le fond gris avec du noir et blanc forme la base ; seulement trois couleurs d’accent, les autres couleurs n’apparaissent que dans les photos.

Nom	Valeur	Usage
Gris de fond	`#E6E6E6`	Arrière-plan (avec très légère granulation)
Rose	`#E8086D`	Anneaux, rubans, faisceaux, flashs de fond
Bleu vif / Bleu roi	`#1F86F0` / `#0D3ED8`	Barres, silhouettes miroir / grands cercles, ciel
Bleu-violet	`#6982F6`	Flashs de fond, couleur de silhouette d’entrée
Menthe	`#19E6B4`	Petites surfaces
Presque noir	`#110D0C`	Noirs, fin

La couleur de fond change de façon brutale par section : gris → noir → rose → bleu-violet, chaque transition se fait en une image.

1.4 Polices

Le mélange est intentionnel, chaque type d’information a sa police : transition serif (Times, annotations entre parenthèses, contours vides), sans-serif géométrique fine (Montserrat, chiffres d’années, espacement serré), police technique aux angles arrondis (Jura / OCR-A, lignes de commande et petites étiquettes), serif moderne à fort contraste (Playfair/Bodoni, grands mots de titre, lettres collées), serif très grasse (Lubalin/Rockwell, titres principaux, étirés horizontalement), police à chasse fixe (Consolas/Courier, code et grands chiffres), police CJK de type Song/Ming (peut être étirée horizontalement jusqu’à 3×), pixel art. Les petits textes doivent rester petits (6–10 px) ; ils apportent de la « texture », pas de l’« information ».

1.5 Vocabulaire de matériaux

Photographies détourées (noir et blanc à haut contraste, seuil), traits de contour (lignes noires sur fond blanc avec des points épars), captures d’écran d’interface système (fenêtres contextuelles, icônes de fichiers, tableaux, textes de keyframes), scans de pellicule (support, perforations, code latéral), petits objets 3D (métal liquide, tubes brillants, maquettes blanches, filaires), dégradés coniques holographiques, motifs 1-bit tramés, QR codes, personnages pixel. Le même objet apparaît souvent en deux versions : l’objet réel et sa silhouette monochrome.

1.6 Textures

Les zones de couleur pleine restent propres, les dégradés et gris ont une granulation visible ; une couche de bruit monochrome de 2–3% recouvre toute l’image.
Les photos sont traitées comme des « photocopies » : seuil, séparation de tons, seulement trois ou quatre niveaux de gris.
Les traits de contour sont des lignes noires avec remplissage blanc, pas des lignes grises ; les lignes sont fines, avec des points de rupture.
Les objets chromés ressemblent à des rendus post-traités avec séparation de tons : un contour blanc global plus un contour noir, les hautes lumières sont un cœur blanc entouré d’anneaux concentriques.

2. Langage de mouvement

2.1 Caméra

Zoom : transitions purement linéaires de 3 à 5 images entre des niveaux fixes, arrêt brutal, pas d’easing. Parfois, easing exponentiel (multiplication de la différence par 0,6–0,75 par image) ou accélération exponentielle en rapprochant. Possibilité de coupes franches.
Translation : superposition de trois composantes :
1. Dérive constante, environ 4 px du monde par image, tout au long du film ;
2. Impulsions sur les images de battement, puis décroissance par facteur 0,6–0,8 par image (ex : +195, +33, +20, +14, +11, +9, +7) ;
3. Cuts brusques, saut de plusieurs centaines de px en une image.
La caméra est « cuite » en keyframes linéaires image par image ; ne comptez pas sur des courbes de Bézier pour deviner cette courbe.

2.2 Battement

Les événements tombent sur une grille de 6 images par battement (0,25 s à 24 fps), avec un possible déphasage global. Les éléments apparaissent un par battement, un par un, pas en fondu simultané.

2.3 Entrée et variation des éléments (techniques clés)

Silhouette d’entrée : d’abord une silhouette monochrome pendant 1–2 images (blanc → bleu-violet → objet réel, ou rose → objet réel), puis le vrai texture. Utilisez l’effet « Teinte » pour mapper le noir et blanc sur une même couleur, puis faites passer la quantité de 100 à 0 en mode Hold.
Flash d’une image / alternance de taille : apparition → disparition d’une image → réapparition ; ou grand, petit, grand, petit trois flashs puis stabilisation.
Wipe radial par battements : un élément annulaire balaie d’abord un segment, puis à chaque battement le segment entier saute à un nouvel angle, les segments ne dérivant que de 1–2°/image.
Deux wipes linéaires tête-queue : un élément en forme de barre avance d’abord par la « tête », puis la « queue » rattrape ; la partie restante devient l’élément suivant.
Keyframes Hold : position, échelle, rotation sautent image par image ; le seul easing réel est un ralentissement de 2–3 images.
Pop-in : de 0,3–0,7× à 1,0× en 2–3 images, avec possible overshoot de 1,1–1,2×.
Épinglage à l’écran : certains éléments restent fixes à l’écran quand la caméra bouge (en leur appliquant la transformation inverse de la caméra image par image), puis sont « rendus » au monde après un moment.
Mélange de framerates : les petites animations 3D sont souvent faites en 30 fps puis insérées dans une timeline 24 fps, se manifestant par des pas de 1, 2, 1, 1 toutes les 4 images. Pour la reproduction, utilisez numéro_image_source = ⌊1,25·(f − f0) + 0,5⌋, pas d’interpolation uniforme.
Copies miroir décalées : quand une silhouette miroir apparaît, une copie blanche en dessous glisse depuis une position décalée vers la position exacte en 4–5 images.

2.4 Flashs globaux

Effet	Méthode
Changement brutal de couleur de fond (noir, rose, bleu-violet)	Keyframes Hold sur un calque de couleur de fond
Flash de seuil (1 image, l’image devient binaire)	Effet « Seuil » sur un calque de réglage supérieur
Flash de seuil différentiel (tout ce qui est différent du fond devient blanc)	Un calque de la même couleur que le fond en mode « Différence », avec un effet « Seuil » au-dessus
Inversion totale (certains éléments conservent leur couleur)	Calque supérieur en mode « Inverser » ; les éléments à préserver s’inversent eux-mêmes d’abord
Stries horizontales locales	Petit calque de réglage avec effet « Transformation », désactiver l’échelle uniforme, étirer la largeur à plusieurs milliers de %
Retournement	Échelle X du calque en Hold image par image (passage par zéro négatif), point d’ancrage également déplacé image par image, un image d’overshoot
Fin	Barres de dégradé horizontales remplissent l’écran par étapes puis disparaissent, le fond s’assombrit progressivement jusqu’au presque noir, les titres sont étirés horizontalement en trainée

3. Ordre de création d’une vidéo originale

Dessinez d’abord la longue bande : définissez la largeur du monde (environ 800–1000 px du monde par seconde), divisez en 4 sections, chaque section avec un thème et une densité.
Planifiez la liste des plans : pour chaque plan, notez le niveau de zoom, cx de début et fin, couleur de fond, événements ; les transitions entre plans sont uniquement des rampes linéaires ou des coupes franches.
Placez les événements sur la grille de 6 images, un nouvel élément par battement ; tous les 2–3 secondes, un flash global ou un changement de couleur de fond.
Chaque élément choisit une technique d’entrée dans la section 2.3, sans répéter plus de deux fois dans la même section.
Préparez les matériaux selon le vocabulaire de la section 1.5, avec une version silhouette monochrome pour chaque élément.
Enfin, ajoutez la granulation uniforme et vérifiez qu’il n’y a que trois couleurs d’accent.

4. Implémentation dans After Effects

4.1 Structure du projet

RB_REPLICA/
  01_Comp/   RB_MAIN (1920×1080 rendu final)   RB_WORLD (monde en bande, par ex 14400×2600)
  02_Assets/    Sous-dossiers par section (A_… B_… C_… D_…, règle et effets globaux)
  03_Solids/    Couleurs de fond, calques de réglage, masques

Dans RB_WORLD, placez tous les calques de l’espace monde ; le point (x, y) du monde correspond au pixel (x + OX, y + OY) de la comp, avec une marge autour.
RB_MAIN de bas en haut : fond de couleur → RB_WORLD (avec transformation effondrée activée, la caméra est ses keyframes de position/échelle) → calques superposés dans l’espace écran → calques de réglage (granulation, seuil, inversion…).
Les calques sont étiquetés par couleur de section, les noms de fichiers des assets portent le préfixe de section, pour naviguer parmi les 500+ calques.

4.2 Génération par script plutôt que placement manuel

Le grand nombre de calques et les valeurs toutes mesurées se prêtent à une description de scène par script avant import :

Une Scene contient une liste de calques ; chaque calque a des coordonnées monde, un intervalle span(f_in, f_out), des keyframes de propriétés, une liste d’effets.
Les assets sont dessinés par des fonctions et mis en cache selon le hash « code source + paramètres », redessinés seulement en cas de changement.
Export au format JSON AE, importé avec ae_project_import_json via l’API aftereffects MCP ; pour reconstruire, supprimez le dossier racine existant par id avant d’importer (l’import ne fait qu’ajouter).
Les commutateurs non transportés par JSON (calque de réglage, transformation effondrée, mode de fusion) sont listés séparément et ajoutés après import avec layer.set_props / layer.set_blend_mode.
Les éléments dont la posture change à chaque image (objets 3D en rotation, dégradés qui changent image par image) sont faits en « un calque par image », chaque calque ne vivant qu’une image, plus fiable que d’empiler des keyframes d’effets sur un seul calque.

4.3 Mémo d’utilisation des effets

Effacement linéaire : l’angle est la direction de progression ; +90 efface depuis la gauche, −90 depuis la droite, 180 depuis le haut, 0 depuis le bas ; l’effacement est calculé dans l’espace du calque, donc si le calque pivote, il faut compenser l’angle en sens inverse.
Effacement radial : angle de départ 0 = vers le haut, sens horaire ; « Les deux » signifie effacement de part et d’autre de l’angle de départ.
Dans un projet en 16 bpc, le niveau de l’effet « Seuil » est à renseigner entre 0 et 1.
Pour un calque de réglage de taille non identique à la comp, les paramètres de points des effets subissent une conversion « calque → comp ».
Les échelles statiques non proportionnelles doivent de préférence être « cuites » dans l’asset plutôt que laissées dans la transformation du calque (prévisualisation et export peuvent différer).

4.4 Rendu et export

Le H.264 intégré d’AE assombrit les roses saturés. Utilisez un AVI « sans perte », puis ffmpeg :

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 Collecte et organisation du projet

Lors de la livraison ou de l’archivage, placez le projet et ses assets réellement utilisés dans un dossier indépendant (équivalent à « Fichier → Réduire le projet → Rassembler les ressources ») :

Copiez uniquement les sources référencées par les calques, en respectant la structure de dossiers du panneau Projet, dans un dossier (Footage)/ ;
Générez une version du projet pointant vers le dossier de collecte (nouveau projet → import du JSON avec chemins modifiés → ajout des commutateurs → réglez la même profondeur de bits et les mêmes paramètres de couleur que le projet original → Enregistrer sous) ;
Rédigez un rapport de collecte : spécifications de la comp, nombre et taille des assets, fichiers manquants, effets utilisés (dépendance aux plugins tiers, polices), éléments non collectés ;
Validez : le projet original et le projet collecté rendent les mêmes deux images, la comparaison pixel par pixel doit être parfaitement identique ; vérifiez aussi qu’aucun asset ne manque ;
Une fois terminé, remettez AE sur le projet original. Ne touchez pas aux comps et assets que l’utilisateur a placés dans son projet.

5. Méthode de reproduction d’une vidéo de référence

L’objectif est que le résultat « ressemble à la même vidéo », les assets étant redessinés et regénérés, pas copiés depuis la source.

5.1 Ordre

Extrayez les images (toutes les images, JPG suffit) et notez les paramètres de base : résolution, framerate, nombre d’images, présence ou non de flou de mouvement, si la piste audio a vraiment du son.
Déterminez d’abord la caméra : trouvez une référence rigide traversant tout le film (ici la règle), mesurez le zoom et la translation image par image, cuisinez-les dans une table de caméra.
Reconstituez le monde : avec la caméra, rétroprojetez chaque image dans les coordonnées monde ; toutes les mesures ultérieures se font dans l’espace monde.
Listez les éléments : pour chaque élément, notez sa position dans le monde, son image d’apparition, sa disparition, sa technique d’entrée, ses changements image par image.
Montez la première version, rendez-la, comparez image par image, itérez sur les écarts. Chaque version cible un lot de problèmes ; une fois corrigés, relancez le rendu et comparez à nouveau.

5.2 Discipline de mesure

Audit de la caméra : localisez chaque trait de la règle image par image, reconvertissez en coordonnées monde, comparez avec la grille idéale. Les résidus doivent être constants dans un même plan ; s’ils ne le sont pas, c’est que la table de caméra est erronée. Cette étape a permis de détecter deux erreurs d’alignement de 8 px et 49 px, invisibles dans un comparatif côte à côte mais qui faussaient toutes les mesures suivantes.
Utilisez des détections numériques plutôt que l’œil : lire les coordonnées sur une image recadrée avec grille introduit un biais systématique de 3–8 px. Pour les grandeurs importantes, utilisez des détecteurs : seuil de couleur plus boîte englobante (tête/queue des barres), centroïde de région connexe (hautes lumières, points de repère), ajustement de cercle/ellipse (sphères, anneaux, orbites), statistiques par ligne (numéro de ligne et épaisseur des traits). Faites passer le même détecteur sur l’image originale et la reproduction, puis comparez.
Images recadrées alignées sur le monde : pour comparer, découpez et mettez côte à côte le même rectangle monde dans l’original et la reproduction, plutôt que des captures d’écran de l’écran ; surtout pour les plans où la caméra bouge.
Image par image, pas toutes les 2 images : une rotation sur une période de 4 images peut sembler « presque immobile » si on échantillonne toutes les 2 images.
Si un élément « bouge bizarrement », suspectez d’abord la caméra, puis l’élément.

5.3 Faire redessiner les assets par GPT / Codex à partir des images de référence

Convient aux photos, traits de contour, collages, dessins à la main :

Recadrez l’image la plus nette de l’élément (1–2 images), agrandissez-la 2–4× comme image de référence.
Structure du prompt : « Reproduis fidèlement le X dans l’image de référence » → description détaillée de chaque objet et de son aspect → liste des choses à supprimer (règle, lignes superposées, éléments adjacents, texte) → demande de fond transparent.
Le modèle a tendance à étirer le sujet pour remplir le canevas : ajoutez des bords à l’image de référence jusqu’au ratio de votre sortie, et mentionnez « garde les proportions, laisse des marges ».
L’aperçu ne montre pas le canal alpha, donnant l’impression d’un halo ; vérifiez l’alpha avant de juger, seuillez-le puis utilisez-le.
Pour une image contenant plusieurs objets, la disposition peut dériver : découpez l’image en morceaux, chaque morceau étant placé selon son rectangle monde mesuré, en permettant des échelles non proportionnelles par morceau.
Les marques commerciales tierces copiées par le modèle doivent être effacées.
Les tâches de génération peuvent être lancées en parallèle en arrière-plan, tandis que vous continuez les mesures et la partie programmatique.

Ne convient pas aux modèles génératifs : tout ce qui nécessite une précision de mouvement ou de topologie (anneaux en rotation, perles fusionnées, dégradés changeant image par image, filaires). Ces éléments sont générés programmatiquement à partir de paramètres géométriques ajustés ; le modèle génératif ne s’occupe que de la texture et de l’aspect visuel. En cas de déviation par rapport aux outils suggérés par l’utilisateur, expliquez la raison dans le rapport.

5.4 Méthode d’ajustement des petits objets 3D

Suivez la position image par image de caractéristiques distinctives (hautes lumières) ;
Ajustez une trajectoire de projection (ellipse), puis interprétez avec un modèle perspectif expliquant « plus proche plus grand, plus éloigné plus petit ; plus proche plus espacé, plus éloigné plus serré » ;
À partir de la séquence des phases, déduisez la vitesse de rotation et le rythme de conversion de framerate ;
Rendez image par image avec les paramètres ajustés, puis superposez le résultat avec l’image originale pour vérifier la phase.

5.5 Comparaison et livraison

Chaque version produit : le film final, une vidéo de comparaison synchronisée avec l’original en haut et la reproduction en bas, avec le numéro d’image, et plusieurs images clés comparées côte à côte.
La documentation contient : la liste des plans, la courbe de la caméra, les valeurs mesurées pour chaque élément, ce qui a changé dans chaque version, les écarts restants.
Dans le rapport, décrivez précisément ce qui ne correspond pas encore, en précisant la catégorie d’écart (forme, luminosité, position, timing), ne vous contentez pas de lister ce qui a été corrigé.

6. Checklist

Avant livraison, vérifiez point par point :

7. Problèmes courants

Les couleurs saturées sont plus sombres après rendu : pas de sortie sans perte suivie de la conversion bt709 avec ffmpeg.
Un élément est décalé de plusieurs dizaines de px entre deux plans : la table de caméra a compté un cycle de graduation en trop ou en moins lors d’un cut brusque.
La direction du wipe est erronée : l’angle de l’effacement linéaire est la direction de progression ; si le calque est pivoté, il faut compenser.
L’image de seuil est tout noir ou tout blanc : dans un projet 16 bpc, le niveau a été saisi sur 0–255 au lieu de 0–1.
Les proportions de l’asset généré sont fausses : l’image de référence n’a pas été bordée jusqu’au ratio de la sortie.
Un élément épinglé à l’écran bouge pendant un zoom : la transformation inverse doit être appliquée avec les valeurs de la caméra image par image en keyframes Hold, pas seulement sur la première et la dernière image.

Demander à votre IA préférée

Documentation