Communitygithub.com

remotion-reference-fidelity

Analyse de référence, reproduction fidèle et généralisation syntaxique pour compositions MG. Mots-clés : référence, reproduction stylistique, alignement, vérification de fidélité. Sans référence, utiliser rd-noref.

Qu'est-ce que remotion-reference-fidelity ?

Ce skill définit une méthodologie stricte de reproduction de références pour les compositions motion graphics (MG) dans Remotion. Il ne s'agit pas de produire des dessins uniques, mais de construire un système de mouvement transférable qui préserve la logique d'information, la hiérarchie des preuves, le timing et le rôle éditorial de la source. Le skill est conçu pour être intégré dans un pipeline de production koubo – il ne duplique pas les valeurs de configuration (fps, résolution, tokens de design) définies ailleurs, mais les utilise. Il impose une analyse préalable rigoureuse (génération de motion maps, extraction de frames) et une série de portes de vérification obligatoires (image statique, dynamique, audit indépendant) avant la livraison finale. Il propose six grammaires de reproduction validées (par exemple, diagnostic persistant + preuve transitoire, citation + impact quantifié) et fournit un modèle de données typé (`MgBeat`) pour structurer chaque segment sémantique. Enfin, il distingue clairement la reproduction à partir d'une référence de la création sans référence (via `rd-noref`).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jincheng2026/jc-remotion-skills/tree/main/skills/remotion-reference-fidelity

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Base de Référence – Style MG (Motion Graphics)

Construisez un système de mouvement transférable, pas un dessin unique. Préservez la logique d'information, la hiérarchie des preuves, le timing et le rôle éditorial de la référence avant de polir les détails visuels.

Position dans le système actuel

Ce skill est la couche méthodologique de fidélité à la référence, pas une ligne de production parallèle. Le pipeline koubo et ses sources de vérité possèdent les chiffres concrets ; ce fichier ne possède que « comment lire fidèlement une référence et reproduire sa logique argumentative ». Référez-vous à eux et ne reformulez jamais leurs valeurs ici :

  • fps / résolution / nombres d'images → remotion-assembly SKILL §0 (fps/résolution du compositing doivent correspondre au métrage, utiliser ffprobe d'abord, ne pas supposer 60fps) + remotion-design-system references/motion.md §0 (d'abord les secondes, ensuite les images, le compositing est en 30fps réel) + specs.md (source véridique des spécifications mesurées). Ne pas coder en dur 60fps ou 4K ici.
  • jetons de design (couleur / typographie / grille / rayon / zone de sécurité) → remotion-design-system SKILL §1 + typography.md / texture.md.
  • modèle de prise en charge → layout.md (prise en charge des assets de niveau A ; le niveau B – assombrissement en slow-motion et incrustation – a été refusé par l'utilisateur, la prise en charge implique la sortie complète du segment de la personne).
  • micro-mouvement persistant → motion.md §8/§9 (le protagoniste doit avoir un souffle () ; chaque chapitre ≥ 1 mouvement visible discernable).

Ligne de production : la livraison koubo actuelle est intégrée (baked) – vidéo OffthreadVideo en fond + MG cuits dans un seul compositing (Koubo071501.tsx / scenes/SceneNN.tsx), examinée sous forme de rendu mp4 de scène intégrée et finalisée via la chaîne master (assembly §4/§6). Le langage « calque alpha transparent / aperçu damier / master alpha » ci-dessous décrit un mode de livraison alpha optionnel uniquement ; lors de la livraison dans la ligne koubo, lisez « aperçu damier » comme « aperçu de scène intégrée » et « master alpha » comme « master intégré + chaîne master ».

Principe non négociable

Considérez la MG comme une couche argumentative attachée à la parole :

  1. Identifiez l'affirmation de la phrase.
  2. Choisissez la structure visuelle minimale qui la prouve ou la clarifie.
  3. Gardez l'orateur visuellement dominant sauf si le montage devient délibérément une prise en charge médiatique.
  4. Changez d'état uniquement lorsque le sens parlé change.

N'inventez pas une scène plus jolie mais sémantiquement différente. Un redesign visuellement poli est une réplique échouée si ses preuves, sa séquence d'états ou sa fonction éditoriale diffèrent de la source.

Sélectionnez une grammaire de scène

Utilisez l'une de ces grammaires validées, puis adaptez le contenu et le timing :

  • Diagnostic persistant + preuve transitoire : gardez les cartes de risque/checklist stables pendant qu'une capture d'écran réelle apparaît brièvement et disparaît.
  • Processus stable + phrase de successeur : montrez le pipeline complet comme un état établi, puis remplacez-le par une courte conclusion à la limite de la phrase.
  • Preuve + verdict différé : laissez d'abord une vraie carte de preuve ; n'introduisez le tampon de verdict qu'après que le public a lu les chiffres.
  • Explication multi-plans : utilisez composition -> chapitre uniquement -> identité -> prise en charge médiatique ; n'aplatissez pas des plans distincts en un seul tableau de bord.
  • Citation preuve + impact quantifié : capture d'écran de citation réelle, annotation, décompte mesuré, mot-clé souligné, puis pastille orateur/source.
  • État du système + titres progressifs : maintenez la matrice centrale et ne révélez que les titres mentionnés par la parole.

Ces six grammaires sont des grammaires de reproduction de référence. Le propre système de battements natif de l'assemblage koubo (système de repères latéraux / camp rouge-vert / moments de punch / hook·CTA / jugements en slow-motion) réside dans remotion-assembly references/narrative.md – utilisez-le lors de la création d'une nouvelle vidéo koubo, ne le dupliquez pas ici.

Analyse avant de coder

Pour chaque segment de référence :

  1. Vérifiez le fichier source correct et la plage de temps exacte. Vérifiez les candidats en cas d'ambiguïté sur les noms de fichiers.
  2. Extrayez les images au début, à chaque limite sémantique, à chaque point médian de transition, et à la fin.
  3. Écrivez une carte de mouvement (motion map) avec le temps source absolu, l'image locale, les calques visibles, les calques entrants/sortants, et la phrase parlée provoquant le changement.
  4. Séparez la MG réelle des sous-titres, des séquences de l'animateur, des images d'illustration, et du plan éditorial suivant.
  5. Mesurez les ancres, les limites, l'opacité et la durée à partir des images sources. Marquez explicitement les estimations.
  6. Utilisez de vraies captures d'écran, personnes, logos, articles et extraits d'actualités lorsque la référence s'appuie sur des preuves. Ne dessinez pas à la main de fausses UI de preuves.

Si la carte de mouvement est incertaine, arrêtez-vous avant l'implémentation et rassemblez plus d'images.

Construisez le calque

  • Faites correspondre le fps et la résolution du projet – référence koubo 1080p, compositing 30fps ; utilisez ffprobe d'abord, ne supposons pas 60fps/4K (note de position ; erreur #19). La sortie 4K est ×2 de la base 1080p selon design-system §1.
  • Le mode de livraison détermine l'arrière-plan : le mode intégré (koubo par défaut) composite la MG sur le fond OffthreadVideo en une seule composition ; le mode alpha garde l'arrière-plan du rendu transparent et fournit une composition d'aperçu damier séparée.
  • Protégez la zone de sous-titres et le visage et les mains de l'orateur (jetons SAFE : les cartes permanentes ne dépassent pas x55%, la zone interdite pour les sous-titres y>82%, le bord inférieur des éléments de la zone gauche ≤y840 est plus strict – design-system §1 ; coordonnées de la zone interdite pour les personnes / zone droite voir layout.md).
  • Réutilisez la typographie, la couleur, la grille, le rayon et les jetons de zone de sécurité du projet depuis src/design/tokens.ts (design-system SKILL §1) ; n'introduisez pas un système de design parallèle et ne reformulez pas les valeurs des jetons ici.
  • Stockez le contenu et le timing de la scène dans des objets de données lorsque le motif sera réutilisé.
  • Exigez des métadonnées evidenceRef traçables pour le matériel réel. Protégez les assets sources importants avec SHA-256 lorsqu'un remplacement silencieux invaliderait la fidélité.
  • Préférez les petits changements d'opacité, de position ou d'échelle liés au sens (motion.md §6 : trois niveaux de vocabulaire de mouvement). Rejetez les boucles décoratives, les entrants superflus et les dépassements de ressort (motion.md §11). Ceci n'est pas une interdiction du micro-mouvement persistant – la référence respire : les éléments principaux doivent être enveloppés dans <Breathe>, les phases décalées, les petits éléments non (motion.md §9), et chaque chapitre porte ≥ 1 mouvement continu lisible (motion.md §8). (L'interprétation antérieure « éviter la respiration ambiante » était erronée par rapport à la source et est remplacée par motion.md §9.)
  • Préservez la hiérarchie d'opacité éditoriale : le HUD du chapitre est net ; les noms de soutien, portraits, timelines et preuves contextuelles peuvent être plus sombres ; la preuve ou le verdict actuel reçoit le contraste le plus élevé.
  • Un clip source en plein écran est une prise en charge éditoriale opaque (prise en charge des assets de niveau A, layout.md), pas un calque translucide. Modélisez-le comme son propre plan/Scene, avec la sortie de l'orateur pour toute sa durée (sortie complète du segment de la personne, pas d'incrustation image dans image – layout.md ; PiP déjà refusé).

Langage du timing

  • Commencez à partir de l'état actuel de la source. Ne rejouez pas l'animation de construction lorsque la référence commence déjà assemblée.
  • Gardez l'information assez longtemps pour être lue ; le style est piloté par l'état, pas constamment en mouvement.
  • Les petites entrées/sorties sont d'environ 0,1-0,3 s ; convertissez en images au fps réel de la composition (d'abord les secondes, ensuite les images, motion.md §0 – koubo 30fps → ~3-9 images). Mesurez à partir de la source si possible (specs.md source véridique des spécifications). Ne transportez jamais un nombre d'images 60fps dans une composition 30fps (erreur #19).
  • Autorisez l'échelonnement (stagger) uniquement lorsqu'il correspond à une énumération parlée.
  • Laissez les anciennes preuves disparaître avant un verdict ou une phrase successeur lorsque la référence le fait.
  • Préservez les chevauchements et les révélations retardées. Ne remplacez jamais une séquence de fondu/chevauchement par un cut sec par commodité.
  • Terminez à la véritable limite de la MG. N'étirez pas un graphique de 1,2 seconde sur des images d'illustration non liées.

Portes de fidélité obligatoires

Passez chaque porte dans l'ordre :

  1. Carte de mouvement : séquence d'états et limites vérifiées par la source.
  2. Porte statique : 3 à 6 images source contre réplique à des moments correspondants.
  3. Porte dynamique : un petit H.264 côte à côte – source à gauche, notre rendu à droite (scène intégrée pour koubo ; aperçu damier en mode alpha).
  4. Audit indépendant : un autre réviseur vérifie le timing, la géométrie, la hiérarchie d'opacité, les assets réels et les états supplémentaires/manquants. Tout dimension < 7 ou présence de violation de niveau FAIL = retour (mg-judge + rubric.md, assembly §2.5).
  5. Livraison du master : ne faites le rendu du master final qu'après la comparaison dynamique ET l'approbation finale dynamique de l'utilisateur (la sensation de mouvement est une zone aveugle de l'image fixe par IA ; la sortie du master inclut l'approbation finale de l'utilisateur – assembly §2.5 porte ③ ; mp4 intégré → chaîne master pour koubo, assembly §6 ; master transparent en mode alpha).

Le thread d'implémentation ne doit pas s'autocertifier. Une correspondance d'image fixe ne peut pas approuver le timing du mouvement.

Discipline de rendu

  • Utilisez --bundle-cache=false après les modifications de code lorsque des bundles Remotion obsolètes pourraient masquer les changements (erreur #02 : ○ = réutilisation de l'ancienne image).
  • Faites des rendus de petites prévisualisations pour la révision – 1080p --scale=0.5, ou le service de rendu de scène node scripts/render-service.cjs segment|stills|qc (assembly §6) ; une composition en damier uniquement en mode alpha.
  • Pour une réparation de timing étroite, faites le rendu uniquement de la plage d'images affectée (--frames=a-b), pas de la composition entière.
  • Gardez les prévisualisations de révision petites ; ne faites jamais le rendu d'un grand master de manière spéculative (zone dangereuse « lancer automatiquement un rendu 4K » ; le rendu ne démarre que dans la plage confirmée par l'utilisateur/le plan).
  • Faites le rendu du master final uniquement pour une composition approuvée et le codec de livraison demandé ; les longs rendus vont nohup … & disown, surveillez les lignes + dans les logs (erreur #09).

Schémas d'échec à rejeter

  • Redesign sémantique présenté comme réplication.
  • Cartes abstraites remplaçant de vraies captures d'écran ou preuves d'actualités.
  • Première image correcte avec des états ultérieurs erronés.
  • Identité, verdict ou conclusion apparaissant avant son signal parlé.
  • Groupes entiers qui disparaissent alors que la référence maintient un calque d'ancrage persistant.
  • Nouvelles étiquettes, taxonomies, tampons ou conclusions absentes de la référence. (Le souffle persistant du protagoniste est imposé par motion.md §9 et n'est pas considéré comme un élément inventé – ne le supprimez pas pour correspondre à une image fixe statique.)
  • Preuve agrandie jusqu'à concurrencer l'orateur.
  • Sous-titres ou séquences de l'animateur accidentellement intégrés dans un asset destiné à être réutilisé.
  • Validation déclarée sans comparaison source contre sortie.

Généralisation pour une nouvelle vidéo tête parlante

Garde-fou du périmètre : cette section généralise les six grammaires de reproduction de référence validées – elle ne s'applique que lorsqu'une référence existe pour sélectionner les grammaires. Concevoir des battements sans référence est un chemin différent : remotion-assembly processus de bout en bout étape 4 (selection.md tableau de correspondance phrase/type) + references/rd-noref.md (génération de multiples solutions en cas de lacune grammaticale → panel de juges → validation utilisateur). Ne forcez pas l'une des six grammaires sur un contenu auquel elle ne correspond pas.

Convertissez le transcript en battements sémantiques. Pour chaque battement, remplissez :

type MgBeat = {
  claim: string;
  grammar:
    | "diagnosis-evidence"
    | "pipeline-successor"
    | "evidence-verdict"
    | "multi-shot"
    | "quote-punch"
    | "system-credentials";
  startFrame: number; // tous les champs *Frame sont au fps de la composition (d'abord les secondes, ensuite les images, motion.md §0) ; jamais un compte à 60fps
  endFrame: number;
  cueFrame: number;
  persistentLayers: string[];
  transientLayers: string[];
  evidenceRef?: string;
};

Choisissez la grammaire à partir de l'affirmation, pas à partir de mots-clés de surface. Remplacez le texte, les assets et les images de repère tout en préservant la logique d'état de la grammaire. Si aucune grammaire validée ne correspond, analysez une nouvelle référence et ajoutez une nouvelle grammaire seulement après qu'elle ait passé les mêmes portes.

Contrat de livraison

Livrez :

  • La composition livrée – Scene(s) intégrée(s) dans la composition koubo par défaut ; une paire Calque Transparent + Aperçu Damier uniquement en mode alpha.
  • Métadonnées de preuve et portes d'assets le cas échéant.
  • Comparaisons statiques à temps correspondant.
  • Comparaison dynamique côte à côte.
  • Validation indépendante (toute dimension ≥ 7 et aucune violation de niveau FAIL – mg-judge + rubric.md, assembly §2.5) ET approbation finale dynamique de l'utilisateur.
  • Une note concise expliquant quelle grammaire a été utilisée et pourquoi.

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

Skills associés