Motion design plan de style rouleau de collage : langage visuel, implémentation AE et méthode de reproduction

Ce compétence provient d'une reproduction intégrale frame par frame (1920×1080, 24 ips, 272 images, 12 versions itératives). Elle répond à trois questions : À quoi ressemble ce type de séquence et comment il bouge ; comment le construire dans After Effects ; comment mesurer et aligner une séquence de référence. Les trois parties peuvent être utilisées indépendamment : pour la création originale, consultez les sections 1–3 ; pour la construction du projet, la section 4 ; pour la reproduction, les sections 5–6.

Si le projet actuel contient 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ène, et tools/ sont les scripts de mesure. Lisez-les d'abord, ne réécrivez pas tout à partir de zéro.

1. Langage visuel

1.1 Monde et caméra

Tout le contenu est disposé sur un rouleau horizontal (la référence fait 11 000×1 080), le spectateur voit la caméra se déplacer sur le rouleau.
La caméra n'effectue que des translations horizontales et des zooms, pas de rotation ni de déplacement vertical. Conversion : X_écran = (X_monde − cx)·s + 960, Y_écran = (Y_monde − 540)·s + 540.
Une règle traverse tout le rouleau et reste toujours au centre de l'image (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 le repère pour mesurer la caméra.
Pas de flou de mouvement : un plan qui se déplace de 500 px par image reste net, c'est ce qui donne son côté « dur » à ce style.

1.2 Mise en page

Un axe : le contenu s'organise au-dessus et en dessous de la règle ; les années, numéros sont directement collés à la règle comme coordonnées.
Haut réel, bas miroir : la règle agit comme un miroir, avec l'image originale et le texte à l'endroit au-dessus, et son ombre monochrome et le texte inversé en dessous.
Numérotation entre parenthèses : toutes les annotations sont entre parenthèses, (1) (2), (crash), [cloud1] ; les mots entre parenthèses sont souvent en contour creux.
Contraste d'épaisseur : des lignes fines de 1 px, des cercles concentriques, du texte incurvé, des guides, face à de grandes zones de couleur pleine.
Cadres imbriqués : des cadres noirs dans des cadres noirs, tournés à 90°, la règle les traverse.
Rythme de densité : espacement → dense → très dense → blanc → plein → espacement. Ne pas garder la même densité partout.

1.3 Couleurs

Le fond gris avec du noir et blanc est le corps principal, seules trois couleurs d'accent sont utilisées, les autres couleurs n'apparaissent que dans les photos.

Nom	Valeur	Utilisation
Gris de fond	`#E6E6E6`	Arrière-plan (avec une très légère granulation)
Rose	`#E8086D`	Segments d'anneaux, rubans, faisceaux, flash de fond
Bleu vif / Bleu roi	`#1F86F0` / `#0D3ED8`	Barres, silhouettes en miroir / grands cercles, ciel
Bleu-violet	`#6982F6`	Flash de fond, couleur d'occupation des silhouettes
Vert menthe	`#19E6B4`	Petites surfaces
Presque noir	`#110D0C`	Noir total, fin

La couleur de fond elle-même change brusquement par paragraphe : gris → noir → rose → bleu-violet, chaque fois en une seule image.

1.4 Combinaisons de polices

Le mélange est intentionnel, chaque type d'information a sa police : transition serif (Times, annotations entre parenthèses, contours creux), sans-serif géométrique fine (Montserrat, chiffres des 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 gras (Lubalin/Rockwell, titres principaux, étirés horizontalement), à chasse fixe (Consolas/Courier, code et grands nombres), Song / Mincho (CJK, peut être étiré horizontalement jusqu'à 3 fois), pixel art. Les petits caractères doivent rester petits (6–10 px), ils sont une « texture » pas une « information ».

1.5 Vocabulaire des assets

Détourage de photos (noir et blanc à fort contraste, seuil), dessin au trait type « trouver les bords » (lignes noires sur fond blanc avec des points), captures d'écran UI système (fenêtres contextuelles, icônes de fichiers, tableaux, textes d'images clés), scans de pellicule (support, perforations, code bord), petits objets 3D (métal liquide, tubes brillants, maquettes blanches, filaires), dégradés coniques holographiques, motifs 1-bit tramés, QR codes, petits personnages pixel. Le même objet apparaît souvent en deux versions : réel et son silhouette de couleur unie.

1.6 Textures

Les blocs de couleur unie restent propres, les dégradés et les gris ont une granulation visible ; une couche de bruit monochrome à 2–3 % est ajoutée au-dessus de toute l'image.
Les photos sont traitées comme une « photocopieuse » : seuil, séparation des tons, ne laissant que trois ou quatre niveaux de gris.
Le dessin au trait est constitué de lignes noires et de remplissage blanc, pas de lignes grises ; les lignes doivent être fines, avec des points et des cassures autorisées.
Les objets chromés ressemblent à un rendu avec séparation des tons : un contour blanc général avec un contour noir, les reflets sont un noyau blanc entouré d'anneaux concentriques.

2. Langage du mouvement

2.1 Caméra

Zoom : transitions purement linéaires de 3 à 5 images entre quelques niveaux fixes, arrêt net, pas d'assouplissement. Parfois, une sortie exponentielle (multiplier la différence par 0,6–0,75 à chaque image) ou une accélération exponentielle pour se rapprocher. Parfois, un changement direct.
Translation : superposition de trois composantes :
1. Dérive constante, environ 4 px monde/image, continue tout au long du film ;
2. Impulsion sur les images de rythme, puis décroissance à chaque image avec un facteur de 0,6–0,8 (ex. : +195, +33, +20, +14, +11, +9, +7) ;
3. Cut, sautant de plusieurs centaines de px en une seule image.
La caméra est cuite en images clés linéaires image par image, ne comptez pas sur une interpolation Bézier pour deviner cette courbe.

2.2 Rythme

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

2.3 Entrée et changement des éléments (techniques principales)

Silhouette d'occupation : d'abord une silhouette de couleur unie pendant 1–2 images (blanc → bleu-violet → réel, ou rose → réel), puis remplacement par la texture réelle. Utilisez l'effet « Teinte » pour mapper le noir et blanc à la même couleur, quantité 100 → 0 avec un hold.
Flash d'une image / alternance de taille : apparaît → disparaît une image → réapparaît ; ou grand, petit, grand, petit, trois flashs puis se fixe.
Effacement radial par segment de rythme : un élément annulaire se dévoile d'abord un segment, puis chaque temps le segment entier saute à un nouvel angle, les segments ne dérivent que de 1–2°/image.
Deux effacements linéaires tête et queue : pour un élément en barre, d'abord la « tête » s'étend vers l'avant, puis la « queue » la rattrape, la partie restante devient l'élément suivant.
Images clés hold principalement : la position, l'échelle, la rotation sautent image par image ; les seuls assouplissements sont des sorties de 2–3 images.
Pop : 0,3–0,7× → 1,0, 2–3 images, avec un possible dépassement à 1,1–1,2.
Épinglage : certains éléments sont fixés à l'écran pendant que la caméra bouge (en leur donnant des images clés image par image avec la transformation inverse de la caméra), puis « rendus » au monde après un certain temps.
Mélange de fréquences d'images : les petites animations 3D sont souvent faites à 30 ips puis insérées dans une timeline à 24 ips, se manifestant par des pas 1, 2, 1, 1 toutes les 4 images. Lors de la reproduction, prenez les images selon numéro_image_source = ⌊1,25·(f − f0) + 0,5⌋, n'interpolez pas uniformément.
Copies miroir et décalées : lorsqu'une silhouette miroir apparaît, une copie blanche est placée en dessous, glissant du décalage à la superposition en 4–5 images.

2.4 Flashs globaux

Effet	Méthode
Changement brutal de couleur de fond (noir, rose, bleu-violet)	Images clés hold du calque de fond de couleur unie
Flash de seuil (1 image, l'image devient noir et blanc binaire)	Calque de réglage supérieur « Seuil »
Flash de seuil de différence (tout ce qui est différent de la couleur de fond devient blanc)	Un calque de couleur unie de la même couleur que le fond en mode de fusion « Différence », avec un « Seuil » au-dessus
Inversion plein écran (certains éléments conservent leur couleur)	Calque supérieur « Inversion » ; les calques qui doivent conserver leur couleur ajoutent d'abord une « Inversion »
Stries horizontales locales	Calque de réglage étroit avec « Transformation », désactiver l'échelle uniforme, largeur à plusieurs milliers de %
Retournement	Échelle X du calque en hold image par image (devient négative en passant par zéro), ancre également déplacée image par image, dépassement d'une image
Fin	Barre de dégradé en escalier qui remplit l'écran puis disparaît, couleur de fond descend progressivement jusqu'au presque noir, titre étiré horizontalement en traînée

3. Ordre pour créer une telle séquence originale

Dessinez d'abord le rouleau : déterminez la largeur du monde (environ 800–1 000 px monde par seconde), divisez-le en 4 segments, chaque segment avec un thème et une densité.
Établissez une liste de plans : pour chaque plan, notez le niveau de zoom, le cx de début et de fin, la couleur de fond, les événements ; entre les niveaux, utilisez uniquement des rampes linéaires ou des cuts.
Alignez les événements sur la grille de 6 images, un nouvel élément par temps ; prévoyez un flash global ou un changement de couleur de fond toutes les 2–3 secondes.
Pour chaque élément, choisissez une technique d'entrée dans la section 2.3, ne la répétez pas plus de deux fois dans le même segment.
Préparez les assets selon le vocabulaire de la section 1.5, en créant simultanément une version silhouette de couleur unie pour chaque.
Enfin, ajoutez la granulation uniformément et vérifiez que les couleurs d'accent sont toujours au nombre de trois.

4. Implémentation dans After Effects

4.1 Structure du projet

RB_REPLICA/
  01_Compos/   RB_MAIN (1920×1080 rendu final)   RB_WORLD (le monde rouleau, par exemple 14 400×2 600)
  02_Assets/   Sous-dossiers par segment (A_… B_… C_… D_…, règle et effets globaux)
  03_Solides/   Fond de couleur, calques de réglage, masques solides

RB_WORLD contient tous les calques dans l'espace monde ; le point monde (x, y) correspond au pixel de la composition (x + OX, y + OY), avec une marge autour.
RB_MAIN de bas en haut : couleur de fond → RB_WORLD (activer l'effondrement des transformations, la caméra est ses images clés de position/échelle) → calques en espace écran → calques de réglage (granulation, seuil, inversion…).
Les calques sont étiquetés par couleur de segment, les noms de fichiers d'assets ont le préfixe du segment, ce qui facilite la localisation parmi plus de 500 calques.

4.2 Générer avec des scripts plutôt que de placer manuellement

Le nombre de calques est important, les valeurs sont toutes mesurées, il est préférable de décrire la scène avec un script puis de l'importer :

Un Scene contient une liste de calques ; chaque calque a des coordonnées monde, une plage temporelle span(f_in, f_out), des images clés de propriétés, une liste d'effets.
Les assets sont dessinés par des fonctions et mis en cache par hachage de « code source de la fonction + paramètres », redessinés uniquement en cas de modification.
Exportez vers un JSON de projet AE, importez-le avec ae_project_import_json du MCP aftereffects ; lors de la reconstruction, supprimez l'ancien dossier racine par id puis importez (l'importation ne fait qu'ajouter).
Les réglages non transmissibles par JSON (calques de réglage, effondrement des transformations, modes de fusion) sont listés séparément dans une liste, puis appliqués après l'importation avec layer.set_props / layer.set_blend_mode.
Les éléments dont la pose change à chaque image (objets 3D en rotation, dégradés qui changent image par image) sont réalisés en « un calque par image », chaque calque ne vit qu'une seule image, ce qui est plus fiable que d'empiler des images clés d'effet sur un seul calque.

4.3 Aide-mémoire sur l'utilisation des effets

Effacement linéaire : l'angle est la direction du mouvement, +90 efface depuis la gauche, −90 depuis la droite, 180 par le haut, 0 par le bas ; l'effacement est calculé dans l'espace du calque, si le calque est en rotation, compensez l'angle.
Effacement radial : l'angle de départ 0 = plein haut, dans le sens horaire ; « Les deux » efface des deux côtés à partir de l'angle de départ.
Dans un projet en 16 bpc, le niveau du « Seuil » est saisi en 0–1.
Pour les calques de réglage qui ne sont pas à la taille de la composition, les paramètres de point dans les effets sont convertis une fois par « Calque → Composition ».
Les échelles statiques non proportionnelles doivent de préférence être cuites dans l'asset, pas laissées dans la transformation du calque (l'aperçu et l'exportation peuvent être incohérents).

4.4 Rendu et exportation

Le H.264 intégré d'AE assombrit les roses saturés. Passez par un AVI « sans perte », puis utilisez 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

Pour la livraison ou l'archivage, placez le projet et les assets réellement utilisés dans un dossier indépendant (équivalent à « Fichier → Rationaliser le projet → Collecter les fichiers ») :

Copiez uniquement les assets référencés par les calques, conservez la structure de dossiers du panneau Projet dans (Footage)/ ;
Générez un projet avec les chemins d'assets pointant vers le dossier de collecte (nouveau projet → importer le JSON avec chemins modifiés → appliquer les réglages → définir 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 composition, nombre et taille des assets, fichiers manquants, effets utilisés (dépendance à des plugins tiers, polices), ce qui n'a pas été collecté ;
Vérification : rendez les mêmes une ou deux images dans le projet original et le projet collecté, comparez pixel par pixel pour qu'ils soient identiques ; confirmez qu'il n'y a pas d'assets manquants ;
Une fois terminé, rebasculez AE sur le projet original. Ne touchez pas aux compositions et assets que l'utilisateur a placés dans le projet.

5. Méthode pour reproduire une séquence de référence

L'objectif est que « cela ressemble à la même séquence », les assets sont redessinés et régénérés, pas copiés pixel par pixel de la source.

5.1 Ordre

Extrayez les images (toutes les images, en JPG) et notez les paramètres de base : résolution, fréquence d'images, nombre d'images, présence de flou de mouvement, si la piste audio a vraiment du son.
Résolvez d'abord la caméra : trouvez un repère rigide qui traverse tout le film (la règle ici), mesurez image par image le zoom et la translation, et faites-en un tableau de caméra.
Reconstituez le monde : avec la caméra, vous pouvez projeter n'importe quelle image dans les coordonnées monde ; toutes les mesures suivantes se feront dans l'espace monde.
Listez les éléments : pour chaque élément, notez sa position dans le monde, son image d'apparition, son image de disparition, sa technique d'entrée, ses changements image par image.
Construisez la première version, rendez-la, comparez image par image, et itérez sur les écarts. Chaque version ne cible qu'un lot de problèmes, modifiez et re-rendez avant de comparer à nouveau.

5.2 Discipline de mesure

Audit de la caméra : pour chaque image, repérez chaque trait de la règle, convertissez en coordonnées monde et comparez à une grille idéale. Le résidu doit être constant dans un même plan ; s'il ne l'est pas, le tableau de caméra est erroné. Cette étape a déjà permis de détecter deux erreurs de recalage de 8 px et 49 px, totalement invisibles dans une comparaison côte à côte, mais qui faussaient toutes les mesures ultérieures.
Utilisez des détections numériques plutôt que l'observation visuelle : lire les coordonnées sur une image recadrée avec une grille introduit un biais systématique de 3–8 px. Pour les mesures critiques, utilisez un détecteur : seuil de couleur plus boîte englobante (tête et queue d'une barre), centroïde de composante connexe (reflets, points de repère), ajustement de cercle/ellipse (sphères, anneaux, orbites), statistiques ligne par ligne (numéros de ligne et épaisseur). Exécutez le même détecteur sur l'original et la reproduction, puis comparez.
Recadrages alignés sur le monde : lors de la comparaison, recadrez côte à côte le même rectangle monde de l'original et de la reproduction, plutôt que de comparer des captures d'écran ; surtout pour les plans où la caméra bouge.
Image par image, pas toutes les n images : un échantillonnage toutes les 2 images a déjà fait passer une rotation de période 4 images pour « presque immobile ».
Si un élément « bouge bizarrement », suspectez d'abord la caméra, puis l'élément.

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

Convient aux photos, dessins au trait, collages, dessins à la main :

Recadrez les 1–2 images les plus nettes de l'élément, agrandissez-les 2–4 fois comme image de référence.
Structure du prompt : « Reproduis fidèlement le X de l'image de référence » → décrivez chaque objet et son apparence → listez les éléments à supprimer (règle, lignes superposées, éléments adjacents, texte) → demandez un fond transparent.
Le modèle a tendance à étirer le sujet pour remplir le canevas : ajoutez des marges à l'image de référence jusqu'au ratio du canevas de sortie, et précisez « garde les proportions, laisse des marges ».
L'aperçu n'affiche pas le canal alpha, ce qui donne l'impression d'un halo ; vérifiez d'abord l'alpha, seuillez puis utilisez.
La disposition des images avec plusieurs objets peut dériver : découpez l'image en morceaux, chaque morceau positionné selon son rectangle monde mesuré, en autorisant des échelles non proportionnelles par morceau.
Les marques de tiers copiées par le modèle doivent être effacées.
Les tâches de génération peuvent être lancées en arrière-plan en parallèle, pendant que vous continuez les mesures et la partie procédurale.

Ce qui ne convient pas aux modèles génératifs : les éléments dont le mouvement ou la topologie doivent être précis (anneaux en rotation, perles fusionnées, dégradés changeant image par image, filaires). Ceux-ci sont rendus de manière procédurale avec des paramètres géométriques ajustés ; le modèle génératif ne s'occupe que des textures et de l'image. Si vous vous écartez des outils suggérés par l'utilisateur, expliquez-en la raison dans le rapport.

5.4 Méthode d'ajustement pour les petits objets 3D

Suivez les caractéristiques marquantes (reflets) image par image ;
Ajustez une orbite de projection (ellipse), puis utilisez un modèle avec perspective pour expliquer « plus proche plus grand, plus loin plus petit, plus proche plus dense, plus loin plus espacé » ;
Lisez la vitesse de rotation et le rythme de conversion de fréquence d'images à partir de la séquence de phases ;
Rendez image par image avec les paramètres ajustés, puis superposez le rendu avec l'original pour vérifier la phase.

5.5 Comparaison et livraison

Chaque version produit : le rendu final, une vidéo de comparaison synchrone original en haut / reproduction en bas avec les numéros d'image, et plusieurs images clés en comparaison côte à côte.
Le document enregistre : la liste des plans, la courbe de la caméra, les valeurs mesurées élément par élément, ce qui a changé à chaque version, les points qui diffèrent encore.
Dans le rapport, expliquez clairement ce qui n'est pas aligné, en précisant le type d'écart (forme, luminosité, position, timing), ne vous contentez pas de dire ce qui a été modifié.

6. Liste de vérification

Avant la livraison, parcourez chaque point :

7. Problèmes courants

Les couleurs saturées sont plus sombres après rendu : absence de conversion sans perte puis ffmpeg avec bt709.
Un élément est décalé de plusieurs dizaines de px entre deux plans : le tableau de caméra a ajouté ou oublié un cycle de graduation au niveau du cut.
La direction de l'effacement est incorrecte : l'angle de l'effacement linéaire est la direction du mouvement ; compensez si le calque est en rotation.
L'image de seuil est tout noire ou tout blanche : le niveau a été saisi en 0–255 dans un projet 16 bpc.
Les proportions de l'asset généré sont incorrectes : l'image de référence n'a pas été margée jusqu'au ratio du canevas de sortie.
L'élément épinglé flotte lors d'un zoom : la transformation inverse doit utiliser les valeurs de caméra de chaque image pour créer des images clés hold image par image, pas seulement les premières et dernières.

novahanser/rollback-motion-recreation

Qu'est-ce que rollback-motion-recreation ?

Demander à votre IA préférée

Documentation