morph-edit

Morph Edit (incrustations graphiques animées)

Vous créez des clips graphiques animés pour la vidéo d'un créateur. Chaque clip est une forme unique qui ne coupe jamais : elle se métamorphose en taille, coins et couleur d'un état à l'autre tandis que son contenu change avec un court flou. Un curseur pilote les changements avec de vrais clics et glissements, et chaque changement tombe sur un mot prononcé.

Le résultat est un ensemble de clips que le créateur insère dans son éditeur. Vous leur donnez aussi un rendu d'aperçu de leur vidéo avec les clips insérés, et deux pages HTML : une pour parcourir les clips, une pour comparer avant/après.

Tout ce dont vous avez besoin se trouve dans ce dossier skill :

• engine/ : le moteur d'animation (motion.js), la coque de page (base.css), build.py (clip → HTML autonome), render.js (rendu image par image avec flou de mouvement), beats.js (planches contact d'images fixes), polices (Geist, OFL).
• scripts/ : setup.sh, inspect_video.py, words.py, composite.py, make_pages.py.
• reference/engine-api.md : comment écrire un clip. Lisez-le avant d'écrire votre premier clip.
• examples/opus-aoe2/ : six clips finis pour une vraie vidéo de 54 secondes. Utilisez-les comme barre de qualité et comme points de départ.

Ci-dessous, $SKILL désigne le dossier de ce skill. Travaillez dans un dossier motion/ dans le projet de l'utilisateur.

1. Configuration (première exécution uniquement)

bash $SKILL/scripts/setup.sh ./motion

Ceci vérifie Node, Python 3 et ffmpeg, et installe Playwright + Chromium dans motion/node_modules. Exécutez chaque script du moteur avec NODE_PATH=./motion/node_modules.

2. Entretien

Utilisez l'outil AskUserQuestion ; limitez-vous à un seul tour. Vous avez besoin de :

• La vidéo. Un chemin. Copiez-la ou référencez-la comme motion/work/source.*.
• La transcription. Optionnelle. S'il n'y en a pas (ou seulement du texte brut), transcrivez l'audio avec scripts/transcribe.py (voir étape 3). Cela donne des horodatages de mots réels, plus précis que les estimations SRT.
• Densité :
  • Légère : 2–4 clips par minute, seulement les moments les plus forts.
  • Moyenne (par défaut) : 4–7 par minute.
  • Lourde : la plupart des lignes couvertes, avec de courts intervalles de visage.
• Look :
  • La palette par défaut : toile gris chaud, composants noir et blanc, un accent orange.
  • Ou leur marque : couleurs, et éventuellement une police. Demandez-leur de déposer un logo, des captures d'écran ou des couleurs de marque dans motion/inputs/, et lisez-les.
• Tout ce qu'il faut éviter ou inclure. Lignes à laisser sur leur visage, vrais chiffres ou noms à montrer, captures d'écran de produit à recréer.

Sautez toute question à laquelle l'utilisateur a déjà répondu.

3. Inspecter les images

python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt
# pas de transcription (ou vous voulez des horodatages exacts des mots) : transcrivez l'audio à la place
motion/.venv/bin/python $SKILL/scripts/transcribe.py motion/work/source.mp4 motion/work

transcribe.py écrit words.txt et transcript.srt. Montrez la transcription à l'utilisateur afin qu'il puisse corriger les noms ou termes mal entendus avant la planification.

Regardez vous-même motion/work/contact.png. video.json donne la résolution, les fps et les sections de disposition :

• full : l'orateur remplit le cadre.
• pip : l'orateur est dans une boîte et le reste est vide. Il inclut la position de la boîte et un avertissement si la boîte change de taille ou se déplace.

Les clips doivent correspondre à la résolution et aux fps de la vidéo. Les horodatages de mots d'un SRT sont des estimations (±0,2s) ; traitez-les comme tels.

4. Planifier, et obtenir l'approbation avant tout code

Affichez un tableau avec une ligne par clip :

| # | Entrée–Sortie | La ligne qu'il couvre | Ce que fait la forme, sur quels mots | Traitement | Pourquoi |

Direction créative : décidez quelle portion du cadre chaque clip occupe. C'est la décision la plus importante ; prenez-la par clip et donnez la raison.

• Incrustation plein cadre. Le cadre est entièrement l'orateur, et la ligne décrit quelque chose à voir : un produit, un processus, une comparaison, un nombre, un changement de chapitre.
  • Incrustez pendant la durée de l'idée (3–10s), puis redonnez le visage.
  • N'incrustez pas dans la première seconde de l'accroche ni sur les lignes personnelles, émotionnelles ou d'opinion.
  • Laissez au moins ~2s de visage entre les incrustations.
• Panneau dans l'espace vide. Le montage laisse déjà de la place : une boîte PiP, une séparation, une région vide.
  • Rendez un clip transparent (bg:null) centré dans la zone vide, dimensionné pour rester à l'écart de la boîte de l'orateur à tout moment.
  • Il peut durer longtemps (15s+) en une seule métamorphose continue, car l'orateur reste à l'écran.
  • Si inspect_video.py signale que la boîte change, demandez si c'est intentionnel, puis dimensionnez pour la plus grande boîte ou divisez le panneau au moment du changement.
• Rien. La ligne parle de l'orateur, ou elle est trop proche d'un autre clip.

Règles de contenu :

• Montrez les objets réels du sujet : le dossier, le terminal, le fichier, le produit, le résultat. Tirez-les des mots. Mappez chaque idée sur une interaction du vocabulaire dans reference/engine-api.md (pilule + clic, progression, coche, îlot de statut, carte avec glissement, curseur, bascule, onglets, graphique + infobulle, recherche/filtre, glisser-déposer de fichier, saisie dans le terminal, comparaison côte-à-côte, carte chapitre).
• N'inventez jamais de chiffres, citations, prix ou résultats. Utilisez des barres relatives, des lignes de texte squelette ou des étiquettes tirées de la transcription, et listez ce qui est illustratif. Ne mettez des chiffres réels que lorsque l'utilisateur les donne.
• Une idée par clip. Une séquence continue (toute une section PiP) peut être un long clip avec plusieurs états.
• Cadencez sur la parole, pas sur la musique : un changement par temps parlé, espacé d'environ 0,4 à 1,2 seconde.

Attendez que l'utilisateur approuve ou modifie le plan.

5. Construire

Écrivez un fragment par clip dans motion/clips/NN-nom.html, en suivant reference/engine-api.md et les exemples. Puis construisez :

python3 $SKILL/engine/build.py motion/dist motion/clips/*.html

Placez chaque changement d'état sur son mot : temps local du clip = temps du mot − point d'entrée du clip.

6. Vérifier les images fixes sur les mots clés

NODE_PATH=./motion/node_modules node $SKILL/engine/beats.js motion/dist/NN-nom.html motion/work/NN.png 0.4 1.2 2.1 …

Choisissez les moments où chaque état s'est stabilisé et quelques instants de mi-métamorphose. Regardez chaque planche vous-même. Corrigez tout ce qui est serré, rogné, illisible ou décalé par rapport au mot, ou là où le curseur quitte le cadre. Vérifiez ensuite une fois de plus. Les clips panneau sont rendus sur fond noir dans la planche pour que vous puissiez les juger.

7. Rendu

NODE_PATH=./motion/node_modules node $SKILL/engine/render.js motion/dist/NN-nom.html motion/out/NN-nom_0m32s40.mp4 30000/1001

• Utilisez les fps de la vidéo.
• Les clips panneau (bg:null) doivent être écrits en .mov, ce qui donne du ProRes 4444 avec alpha.
• Nommez chaque fichier par son point d'entrée dans la timeline (0m32s40 = 0:32.40).
• Le rendu prend 4 sous-images par image, donc il est plus lent que le temps réel. Exécutez deux clips en parallèle sur une machine multi-cœur.

8. Livrer

Écrivez motion/plan.json (schéma dans reference/engine-api.md). Pour les effets sonores de l'interface, donnez à chaque clip une liste "sfx" : [[temps local du clip, type], …] tirée de ses signaux : click et toggle sur les clics du curseur, pickup/drop sur le début/relâchement du glissement, whoosh sur les métamorphoses de forme, pop sur l'introduction et les badges, rise/fall sur les barres, type sur la saisie, tick sur l'apparition d'éléments, shutter sur les captures d'écran, et success sur les vérifications. Ensuite :

python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/sfx.py motion/plan.json motion/out/preview.mp4   # effets sonores de l'interface, si l'utilisateur les souhaite
python3 $SKILL/scripts/make_pages.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/make_gallery.py motion/plan.json motion/out/preview.mp4

L'utilisateur reçoit, tout dans motion/out/ :

• les clips
• TIMING.md : fichier, entrée, sortie, la ligne couverte, le traitement, et ce qui est illustratif
• preview.mp4 : sa vidéo avec les clips insérés, coupés francs, audio original (plus effets sonores s'ils sont utilisés)
• sfx/ : les effets sonores de chaque clip sous forme de WAV séparés, pour le mixage dans son éditeur
• index.html : tous les clips jouant simultanément dans une grille, avec l'aperçu complet et des liens vers les autres pages (ouvrez celle-ci en premier)
• viewer.html : parcourez les clips
• compare.html : original vs aperçu, synchronisés, côte à côte, empilés ou en volet

Dites clairement que l'aperçu est destiné à l'évaluation : pour le montage final, ils placent les clips dans leur propre éditeur, où ils peuvent ajuster le timing, ajouter des transitions et mixer l'audio.

Cartes d'abonnement (optionnelles)

Demandez au créateur s'il souhaite une carte de fin d'abonnement sur sa ligne d'appel à l'action et un ou deux brefs rappels. Les modèles sont des fragments de clip dans $SKILL/templates/subscribe/ (end-card.html, reminder.html). Copiez-en un dans motion/clips/, puis :

• Remplacez __CHANNEL__, __HANDLE__ et __AVATAR__ (le logo ou la photo du créateur en tant que data URI ; sans image, utilisez une lettre dans le cercle). Demandez ces informations ; ne devinez jamais un nom ou un pseudo.
• Réajustez les constantes en haut du <script> (IN, les temps de clic, T) sur les propres mots du créateur. La carte de fin clique sur Partager, S'abonner, Cloche, J'aime et Commenter sur les mots que le créateur prononce ; le rappel clique sur S'abonner et Cloche.
• Construisez, vérifiez les images fixes, effectuez le rendu et ajoutez à plan.json comme n'importe quel autre clip. Rendez la carte en tant que panneau .mov transparent pour qu'elle se superpose aux images.

Sous-titres (optionnels)

Créez un SRT dans la langue parlée et un SRT en anglais, à télécharger en tant que sous-titres codés (non incrustés). Travaillez dans motion/work/cap/ :

1. motion/.venv/bin/python $SKILL/scripts/captions/find_gaps.py motion/work/words.txt "<video>" : Whisper peut ignorer des pans entiers de parole sur les vidéos longues. Il imprime les trous ; retranscrivez-les avec retx.py "<video>" "<liste des trous>" motion/work/gapwords.json [langue].
2. python3 $SKILL/scripts/captions/make_cues.py motion/work/words.txt motion/work/gapwords.json motion/work/cap écrit les indices et quatre morceaux.
3. Traduisez les morceaux en parallèle (quatre sous-agents, un par morceau) en utilisant templates/caption_brief.md. Chacun écrit out1..4.json avec {"i","orig","en"} pour chaque indice.
4. Corrigez les indices signalés, puis python3 $SKILL/scripts/captions/build_srt.py motion/work/cap motion/out/captions écrit captions_original.srt et captions_english.srt (deux lignes équilibrées, jusqu'à 42 caractères chacune).
5. Dites au créateur de tester le SRT dans VLC ou un téléchargement non répertorié avant de publier.

Style par défaut

La marque de l'utilisateur remplace ces valeurs.

• Couleur : toile #E9E7E2, encre #0B0B0B, composants blancs, un accent #FF5A1F. Les clips panneau sur des images sombres utilisent des formes claires (#F4F2EE).
• Typographie et icônes : Geist pour le texte de l'interface, Geist Mono pour le code, les noms de fichiers et les terminaux. Un jeu d'icônes avec un poids de trait (M.icon).
• Mouvement : ressorts avec un très léger dépassement au maximum. Les bords avant et arrière utilisent des ressorts différents pour que les indicateurs s'étirent. La caméra zoome pour que chaque état remplisse le cadre.
• Interdit : animations rebondissantes, particules, lueurs, dégradés sur le chrome de l'interface, épaisseurs de trait d'icônes mélangées, temps mort, tout ce qui ressemble à un modèle, données inventées.

Pièges

• Ne mettez jamais will-change sur quoi que ce soit que la caméra met à l'échelle ; le texte rend flou.
• L'échange de texte à l'intérieur d'un conteneur en métamorphose nécessite son propre timing d'entrée et de sortie (M.vis din/lin/lout), sinon l'ancien et le nouveau texte se chevauchent.
• Les étiquettes mix-blend-mode: difference doivent se trouver dans une couche qui a elle-même le mode de fusion. Un parent filtré les isole.
• Les éléments qui glissent sous une surbrillance nécessitent des ressorts M.FAST, sinon la ligne de surbrillance reste vide un instant.
• Gardez le curseur à l'intérieur du cadre à chaque zoom de caméra, y compris pendant les métamorphoses.
• Les estimations de mots provenant d'un SRT dérivent à l'intérieur d'un indice ; placez les changements importants sur le premier ou le dernier mot d'un indice lorsque c'est possible.
• Un clip se termine en maintenant son dernier état ; le composite conserve la dernière image si son créneau est plus long.