Alirezaaliniya/reel-motion-edit

Montage motion graphics de Reel

Transforme une vidéo brute verticale en un montage motion graphics finalisé :

setup → analyser → DEMANDER : style (tableau de style) + options de préparation → fiche de rythme → plan.json
→ vérifier + prévisualisation boucle → rendu overlay → composer → vérifier → PROPOSER : sous-titres + extras

L'overlay est du HTML/GSAP rendu image par image avec un arrière-plan transparent (assets/engine.html), donc la forme persane, les polices et les dégradés sont parfaits au pixel près. Vous n'écrivez jamais de code d'animation à la main : vous écrivez un plan.json qui liste les composants et leurs temps. Le moteur les anime dans le style preset choisi, qui définit l'apparence, le mouvement, les transitions et la palette sonore, et donne à chaque composant ses effets sonores par défaut.

Parlez à l'utilisateur dans sa langue (généralement persan). Gardez les mises à jour de progression courtes.

Pourquoi le montage doit sembler « parfaitement à sa place » — et pas répétitif

Les spectateurs remarquent quand un graphique ou un son est décalé d'une demi-seconde, ou quand il n'a rien à voir avec ce qui est dit. C'est ce qui rend un montage amateur. Les montages précédents ont été critiqués exactement pour cela : des badges décoratifs apparaissaient sur le visage de l'orateur sans correspondre à ce qu'il disait. Plus tard, l'utilisateur a également dit que les montages commençaient à sembler répétitifs. Quatre idées résolvent les deux problèmes, et les outils les imposent pour la plupart :

1. Ancrer aux mots. Tout texte qui fait écho à la parole utilise un ancrage de mot ("t": "w:رایگان"), donc il apparaît sur la syllabe, pas à proximité. Les secondes tapées à la main sont réservées aux événements purement visuels.
2. Ancrer à l'image. Les clics, changements de page et zooms de mise en page proviennent des événements motion.json ("t": "m:m12") et des planches-contacts horodatées que vous lisez vous-même. Un effet sonore de clic sans clic visible est du bruit.
3. Protéger le visage. Déclarez les rectangles du visage et de l'incrustation (PIP) dans plan.avoid. render.js check signale ensuite tout élément qui les recouvre. Corrigez chaque avertissement COVERS avant le rendu.
4. Laissez l'utilisateur choisir le look, puis variez à l'intérieur. Demandez un style avant de concevoir (Étape 2). Ensuite, ne retombez pas sur la même recette à chaque fois : variez le format d'accroche, les composants qui portent les idées, et les transitions. references/styles.md contient le guide par style et une liste de formats d'accroche.

Étape 0 — configuration (premier lancement sur une machine)

python <skill>/scripts/setup.py

Installe faster-whisper, puppeteer-core et gsap dans ~/.cache/reel-motion-edit/, synthétise la bibliothèque d'effets sonores, et télécharge le modèle Whisper (large-v3-turbo, ~1,6 Go ; il reprend et tombe sur hf-mirror.com si huggingface.co est bloqué ou tombe). C'est l'étape « télécharger ce dont vous avez besoin », donc faites-le sans demander. Dites à l'utilisateur en une ligne ce qui est téléchargé. Exécutez-le en arrière-plan : le modèle peut prendre du temps sur les connexions lentes. Pendant ce temps, vous pouvez faire l'analyse visuelle avec analyze.py --no-transcript, puis relancez-le pour la transcription plus tard. Réexécutez scripts/sfx.py ~/.cache/reel-motion-edit/sfx après avoir mis à jour la compétence, pour que les sons du nouveau style existent.

Si vous trouvez un actif supplémentaire utile (une police, un ensemble d'icônes, un effet sonore ou une piste musicale libre de droits), téléchargez-le dans le répertoire de travail. Notez sa licence dans <workdir>/CREDITS.txt. Privilégiez les sources OFL/CC0 (Google Fonts, Pixabay/Freesound CC0). Polices incluses : Vazirmatn (corps), Lalezar (affichage), Changa (technique), Lemonada (ludique), Noto Kufi Arabic (formel). Les polices que l'utilisateur a installées localement (par exemple Morabba, IRANSansX, Yekan Bakh) peuvent être ajoutées via plan.fonts et sont souvent le choix le plus pertinent pour la marque. Regardez dans %LOCALAPPDATA%\Microsoft\Windows\Fonts et C:\Windows\Fonts.

Kit de marque. Si ~/.config/reel-motion-edit/brand.json existe, render.js l'applique automatiquement : style, theme (couleurs de la marque), fonts, handle (@username watermark), handleCorner, logo. Le plan le remplace ; "brand": false l'ignore pour une vidéo. Lorsque l'utilisateur vous indique une préférence durable (son handle, un style qu'il veut toujours, les couleurs de la marque), proposez de le sauvegarder ici.

Étape 1 — analyser

Créez un répertoire de travail à côté de la vidéo (<video dir>/<video name>_edit/) et exécutez :

python <skill>/scripts/analyze.py "<video>" "<workdir>" --lang fa

Ensuite lisez analysis/transcript.txt et chaque analysis/sheets/sheet_*.jpg (10 s chacune, 0,5 s par cellule, horodaté). Les événements de mouvement imprimés par le script (m0 … mN, cut/change) sont des candidats. Confirmez chacun d'eux par rapport aux planches, car un défilement apparaît aussi comme un « change ».

Whisper écorche parfois les noms de produits persans ou anglais. Notez les corrections (elles sont importantes pour les légendes et pour les ancrages de mots : ancrez sur la façon dont Whisper a orthographié le mot).

Étape 2 — demander à l'utilisateur : style + options de préparation (avant de concevoir quoi que ce soit)

Différentes vidéos et différents publics veulent des looks différents, et l'utilisateur veut choisir. Construisez un tableau de style : une image représentative de leur vidéo rendue dans les 7 presets, avec un titre, un badge d'étape, un autocollant et une ligne de sous-titre. Écrivez d'abord un plan minimal (vidéo + un titre + un mot-clé + des étapes si la vidéo a des étapes), puis exécutez :

node <skill>/scripts/render.js "<workdir>/plan.json" styleboard <T>    # → build/styleboard.jpg

Choisissez T où l'image est typique (pas une transition). Envoyez l'image à l'utilisateur (SendUserFile, display render), puis demandez avec AskUserQuestion. Ignorez la question du style si le kit de marque a déjà un style, sauf si l'utilisateur demande quelque chose de différent.

• Q1 — style (4 options max : recommandez d'abord le meilleur ajustement pour ce contenu, avec une raison d'une ligne, plus trois alternatives contrastées ; dites que les autres peuvent être tapés via « Autre »). Presets : gradient dégradé moderne, bold pop/Hormozi, neon tech/cyber, minimal propre style Apple, doodle dessiné à la main, retro VHS, news actualités. Les descriptions sont dans assets/styles.json (label, feel).
• Q2 — options de préparation (multiSelect), seulement celles qui s'appliquent :
  • Supprimer les pauses (jump cuts) : tighten.py supprime les silences de plus de ~0,45 s. Meilleur pour les vidéos de type talking-head. Sur les enregistrements d'écran, prévenez que les étendues silencieuses peuvent être celles où se produisent les clics. Cela modifie la chronologie, donc cela s'exécute avant l'analyse : réexécutez l'analyse sur le fichier resserré.
  • Nettoyage vocal : "voice": "enhance" (débruitage, coupe des grondements, présence, compression douce). Recommandez-le pour l'audio de téléphone ou de pièce.
  • Filigrane @handle : demandez le handle si le kit de marque n'en a pas.
  • Musique de fond : seulement si l'utilisateur a une piste ou veut que vous en trouviez une sous licence CC0. Elle est automatiquement baissée sous la voix.

Si l'utilisateur veut juste le montage et s'en fiche, choisissez pour lui, dites quel style vous avez choisi et pourquoi, et continuez.

Étape 3 — fiche de rythme (réfléchir avant de concevoir)

Écrivez <workdir>/beats.md : une ligne par temps avec la plage horaire, ce qui est dit, ce qui est montré, et la mise en page (visage entier / écran + PIP en bas à gauche / écran tenu à la main / …). Marquez :

• l'accroche (1 à 3 premières secondes) : choisissez un format d'accroche dans references/styles.md, différent de la dernière fois si vous le savez
• chaque étape / idée que l'orateur explique
• le moment de la récompense (résultat montré : « connecté », « fait », le nombre)
• l'appel à l'action à la fin
• les changements de mise en page (zoom entre la caméra et l'écran) : points de transition
• les zones de sécurité par mise en page : où les overlays peuvent se placer sans cacher le visage, le curseur ou la chose démontrée

Lisez references/styles.md (le guide du style choisi) et references/creative-direction.md (rythme, placement, règles SFX). Ils sont courts et ils font la différence entre « chargé » et « pro ».

Étape 4 — plan.json

Écrivez <workdir>/plan.json. Tous les composants, leurs propriétés et les SFX par défaut sont dans references/components.md. Lisez-le avant d'écrire le plan. Forme minimale :

{
  "video": "D:/videos/vpn firefox.mp4",
  "size": [1080, 1920], "fps": 30,
  "style": "neon",
  "voice": "enhance",
  "handle": {"text": "@votre_handle", "corner": "tl"},
  "avoid": [{"name": "face", "from": 0, "to": 14.6, "rect": [200, 420, 680, 900]},
            {"name": "pip",  "from": 15, "to": 29.1, "rect": [0, 1300, 510, 620]}],
  "elements": [
    {"type": "title", "t": 0, "d": 3.8, "y": 90, "kicker": "آموزش ۶۰ ثانیه‌ای", "lines": ["`VPN` *رایگان*"], "sub": "با سرورهای فایرفاکس"},
    {"type": "transition", "t": "m:m3-0.1"},
    {"type": "steps", "items": [{"t": "w:گوگل", "label": "جستجو در گوگل", "sub": "`vpn firefox github`"}], "hide": [[29.0, 34.1]]},
    {"type": "keyword", "t": "w:رایگان", "x": 540, "y": 1640, "text": "رایگان", "emoji": "🎁"},
    {"type": "success", "t": "w:وصل", "x": 405, "y": 678, "title": "وصل شدی!"},
    {"type": "cta", "t": 57.4, "items": [{"text": "سیو کن", "icon": "save"}, {"text": "فالو کن", "icon": "follow"}]}
  ],
  "camera": [{"t": "w:رایگان", "d": 1.2, "type": "punch", "scale": 1.12, "cx": 540, "cy": 700}],
  "sfx": [{"t": 16.2, "name": "typing", "db": -8}],
  "cover": {"lines": ["`VPN` *رایگان*"], "sub": "آموزش ۶۰ ثانیه‌ای"}
}

Laissez le style décider de l'apparence. Ne définissez pas les propriétés visuelles (theme couleurs, mot-clé style/rotate/from, kind de transition, anim du titre, style de légende) sauf si vous avez une raison sémantique (rouge pour une erreur, une couleur de marque). Le preset les remplit, et c'est ce qui rend les styles différents. Une transition sans kind parcourt les transitions du style. theme dans le plan ne remplace que le preset (par exemple la couleur de marque du produit).

Syntaxe du texte : *mot* ou *deux mots* = surbrillance, `latin` = bloc LTR isolé (empêche « VPN »/URLs de s'inverser dans le texte RTL).

Étape 5 — vérifier, prévisualiser, corriger (boucle)

node <skill>/scripts/render.js "<workdir>/plan.json" check
node <skill>/scripts/render.js "<workdir>/plan.json" preview 1 5.5 15.8 21.1 27.4 54

check affiche la chronologie résolue et effectue une vérification pour :

• COVERS : un élément recouvre une zone protégée
• OFFFRAME
• CLUTTER : plus de 3 overlays à la fois
• SFXPILE : sons empilés en 0,35 s
• ORDER : un ancrage de mot a touché une occurrence précédente, donc utilisez w:mot#2

Corrigez chaque problème. Ensuite, regardez build/preview.jpg : choisissez des temps en milieu d'animation pour chaque élément important, et vérifiez que les bulles de texte et les ondulations se trouvent exactement sur leurs cibles. Lisez les coordonnées sur les images en pleine résolution (ffmpeg -ss T -i video -frames:v 1 f.png) plutôt que de deviner à partir des vignettes. Itérez jusqu'à ce que ce soit correct. Les prévisualisations sont peu coûteuses, les rendus complets ne le sont pas.

Étape 6 — rendu et composition

node <skill>/scripts/render.js "<workdir>/plan.json" full        # build/overlay.mov (≈3–6 min / minute de vidéo)
python <skill>/scripts/compose.py "<workdir>/plan.json" --out "<video dir>/<name> - edit.mp4"
node <skill>/scripts/render.js "<workdir>/plan.json" cover <T>   # build/cover.jpg — couverture de publication (image floutée T + titre)

Exécutez le rendu complet en arrière-plan. compose.py fait ce qui suit :

• applique les mouvements de caméra à la vidéo uniquement
• superpose les graphiques
• applique le nettoyage voice si défini
• mélange le lit sonore SFX sous la voix, plus la musique avec ducking si défini : "music": {"file": "...", "db": -20}
• normalise à −14 LUFS

Ne jamais écraser la vidéo source. Écrivez un nouveau fichier, avec un suffixe de version (- edit v2) sur les re-rendus.

Étape 7 — vérifier

Faites une planche-contact de la sortie (ffmpeg -i out.mp4 -vf "fps=1/2,scale=216:-1,tile=10x3" sheet.jpg) et regardez-la. Vérifiez que la durée correspond et que l'audio est présent. Rapportez honnêtement ce que vous avez vérifié (images) et ce que vous n'avez pas pu (vous ne pouvez pas écouter ; le timing des SFX est vérifié par rapport à la liste des événements, pas à l'oreille).

Étape 8 — proposer sous-titres et extras (toujours, à la fin)

Une fois le montage livré, demandez avec AskUserQuestion (multiSelect là où cela convient). Proposez seulement ce qui n'a pas déjà été fait :

• Sous-titres : 3 à 4 styles de references/caption-styles.md, avec le style par défaut choisi (captions dans styles.json) recommandé en premier et la raison basée sur cette vidéo.
• Image de couverture pour la publication (render.js cover).
• Texte de légende Instagram : écrivez <workdir>/post.txt à partir de la transcription : une ligne d'accroche, 2 à 4 lignes courtes de valeur, l'appel à l'action, le lien ou le mot-clé de commentaire mentionné par l'orateur, et 8 à 15 hashtags pertinents en persan + anglais.
• Sauvegarder dans le kit de marque : le style choisi, le handle et les couleurs, pour que la prochaine vidéo commence là.
• Une autre version de style : re-rendre le même plan avec un style différent pour un test A/B (seul l'overlay change).

Pour les sous-titres :

python <skill>/scripts/captions.py "<workdir>" --style karaoke --zones "0-14.6:1400,29.4-33.8:1400" --default-y 1170 --keywords "رایگان,VPN" --fix "غلط=درست,وی پی این=VPN"

Relisez les segments imprimés. Corrigez les orthographes de Whisper avec --fix ; une source de plusieurs mots fusionne les tokens. Ajoutez "captions": {"file": "captions.json"} au plan (le style par défaut est celui du preset ; définissez "style" pour remplacer), exécutez check (les sous-titres ne doivent pas non plus couvrir le visage ou les autocollants), puis rendez et composez à nouveau en tant que nouvelle version.

Pièges à éviter

• Les éléments en coordonnées écran (clic, surlignage, flèches d'appel) se désalignent si un mouvement de caméra zoome la même section. Utilisez les mouvements de caméra uniquement sur les sections de talking-head.
• Les zooms animés de style Camtasia entre le visage et l'écran durent ~0,5 s. Placez l'élément de transition au début du zoom, et ne mettez pas de texte à l'écran dans cette fenêtre.
• steps.hide cache le badge d'étape pendant les sections de visage entier et le ramène après.
• Les horodatages de mots de Whisper peuvent être ~0,1 s en retard sur le premier mot après une pause. Pour les impacts forts (titre), ajustez avec -0,05.
• Les sources qui ne sont pas 1080×1920 (par exemple les exports téléphone 608×1080) sont mises à l'échelle/recadrées à la taille du plan par compose et preview. Les coordonnées du plan sont toujours en pixels de la taille du plan, donc multipliez les coordonnées lues sur les images sources par 1080 / source_width.
• Séquences téléphone tenu à la main d'un moniteur : l'écran dérive, donc les éléments épinglés à l'écran (clic, surlignage, flèches) ne resteront pas sur la cible. Utilisez plutôt la structure (étapes), des autocollants ancrés aux mots dans les marges, et des transitions plein cadre.
• Les titres reçoivent un volet sombre en haut par défaut ("scrim": false pour le supprimer). Il les rend lisibles sur des écrans lumineux.
• Laissez la voix de l'orateur intacte (pas d'égalisation/compression au-delà de la normalisation du volume) sauf si voice est défini.