montage-editeur

Montage motion graphics + interface d'édition

Parle à l'utilisateur dans sa langue. Écris les sous-titres dans les mots exacts de l'orateur (ne paraphrase jamais).

Chemins : ME = dossier de cette compétence, W = un dossier projet par vidéo. Tous les scripts sont en bash/python/node ; scripts/env.sh trouve ffmpeg, node, python, Chrome et le moteur embarqué (engine/). Première fois : voir README.md → Installation (npm install dans le dossier de la compétence, pip install -r requirements.txt).

Règles (non négociables)

1. Logos officiels uniquement pour toute marque mentionnée — jamais d'icône redessinée « inspirée ». Récupère-le depuis le site web de la marque (capture_site.js) ou demande à l'utilisateur.
2. Charte graphique : pour un client, lis les couleurs, polices et logo depuis son site web (captures/info.json) et écris la palette en haut de parts/top.js. Pour les propres vidéos de l'utilisateur, demande sa charte une fois et conserve-la dans theme.json + top.js.
3. Captures du site web : capture le site du client (pages complètes, desktop + mobile) et utilise-les dans les panneaux (navigateur défilant, illustrations officielles recadrées). Les bannières de cookies sont cachées, jamais acceptées. Les écrans de produits connectés ne sont pas accessibles : dis-le et propose d'intégrer des captures d'écran fournies par l'utilisateur.
4. Rythme : plein écran ↔ panneaux (zoom ARRIÈRE dedans, zoom AVANT dehors), punch-ins sur les mots forts (~1 toutes les 2-3 s), exactement un moment signature (logo / nom reveal), musique de fond atténuée sous la voix, effets sonores (whoosh à chaque zoom, pops, clics, frappes, impact sur le reveal), flash lumineux sur les coupures.
5. Annonces publicitaires : rien d'important dans les 14 % supérieurs (y < 270) ni en dessous de y ≈ 1250 (UI Reels/TikTok) ; sous-titres relevés (CAPDY) ; pas de sous-titres dans les panneaux (le panneau affiche les mots comme titres) ; carte de fin = logo de la marque + URL + les mots de l'orateur ; aucune affirmation ou chiffre inventé.
6. Sous-titres jamais sur le visage. Langues LTR → "sens": "ltr" dans projet.json (la construction corrige l'ordre des mots) ; RTL (arabe) → "rtl". Nom de la marque sous forme de pilule (fx: "pill", couleurs dans projet.json → pill).
7. Mixage : l'utilisateur règle la voix / musique / effets dans l'éditeur. Valeurs par défaut : voix 100 %, musique 46 %, effets 36 %. Normalise toujours le volume à -14 LUFS.
8. Chaque animation est un ÉLÉMENT du registre (voir ci-dessous) pour que l'utilisateur puisse la sélectionner, décaler, masquer et commenter. Aucune animation en dehors du registre.
9. Ancres : chaque wS(card, word) doit pointer sur le mot que l'animation illustre — exécute scripts/ancres.py et lis le tableau ; ne devine jamais d'indice.

Workflow

1. Préparer : bash $ME/scripts/preparer.sh <video> <W> <lang> "<Whisper prompt: noms propres>" → source copiée, recadrage plein écran, images clés, coupes probables, transcription mot à mot. Ensuite le détourage de la personne sur fond (~1 s/image ; ne lance pas Whisper en même temps — RAM) : python $ME/engine/mask.py u2net_human_seg <W> && python $ME/engine/make_head.py <W>.
2. Client (le cas échéant) : node $ME/scripts/capture_site.js <url> <W> → captures/, assets/logo-*.png, couleurs/polices. Regarde les captures ; recadre les visuels utiles dans W/assets/ (illustrations, une longue page pour un navigateur défilant).
3. Sous-titres : écris W/cartes.json (mots exacts + timings Whisper ; cartes de 2 à 5 mots ; hot, fx) → python $ME/scripts/cartes.py <W>. Modèle : templates/cartes.EXAMPLE.json.
4. Plan de montage : divise le script en beats (accroche, problème, produit, preuve, CTA…), choisis pour chacun : plein écran ou panneau, quel objet concret montrer, un moment signature, des sons. Écris W/plan-montage.md (modèle templates/plan.EXAMPLE.md) et montre-le brièvement à l'utilisateur avant d'animer.
5. projet.json (modèle templates/projet.EXAMPLE.json) : nom, titre, langue, sens, outro, vol, musique_gain, pill, coupes, cadrage (plans qui vont dans un panneau → fenêtre de mesure), cadrage_force si le masque attrape l'arrière-plan. Ensuite python $ME/scripts/framing.py <W>.
6. Scènes dans W/parts/ : top.js ← templates/top.EXAMPLE.js (palette, CUTS/SEGB, PANELS, zooms ZP, CAPDY) ; primitives.js ← templates/primitives.js ; gfx.js ← templates/gfx.EXAMPLE.js (SCENES_ED, un EL(...) par animation, calques, carte de fin, polices).
7. Sons : W/sons.json (modèle templates/sons.EXAMPLE.json) : musique {bpm, intro_filtree, coupure = silence avant un reveal, accords} et events = [element|null, time|"fin+x", "sound[:param]", gain, [repeat, step]]. Sons : pop, bulle, clic, shutter, succes, buzz, tick, touche, impact, tape, whoosh_in:dur, whoosh_out:dur, ding:freq:dur, shimmer:dur, riser:dur, souffle:dur. Lie chaque son à son élément pour qu'il suive lorsque l'élément est décalé ou masqué.
8. Ancres : python $ME/scripts/ancres.py <W>.
9. Prévisualisations : python $ME/scripts/build.py <W> puis node $ME/engine/04_render_frames.js <W> preview t1 t2 … → planche contact → révise comme un moniteur exigeant (lisible ? visage clair ? zones de sécurité pub ?) et corrige avant le rendu.
10. Rendu : bash $ME/scripts/rendu.sh <W> (arrière-plan, 3-6 min) → <nom>.mp4 (+ .srt/.txt), pistes dans mixage/pistes/, médias de l'éditeur. Vérifie 6-8 images du MP4, -14 LUFS, taille.
11. Éditeur : lance python $ME/scripts/editor_server.py <W> <port> (dans Claude Code desktop : ajoute-le à .claude/launch.json et utilise l'outil de prévisualisation), ouvre http://localhost:<port>/editeur/. Vérifie que la prévisualisation, la sélection par clic et la lecture fonctionnent.
12. Surveiller les commentaires : surveille W/comments.json et émet une ligne par nouveau commentaire avec status == "à faire" (commande dans references/editor.md).

Traitement d'un commentaire

1. Lis-le (target = el:<id> | scene:<id> | cap:<n> | audio:<track>, t, clic x,y).
2. Mets le statut "en cours" : POST /api/comments/status {"id":…, "status":"en cours"}.
3. Modifie l'élément dans parts/gfx.js (ou top.js pour les zooms/panneaux, cartes.json pour les sous-titres, sons.json pour les sons), dans le respect de la charte et du registre. Si la demande est vague, applique la meilleure option et mentionne une alternative dans la réponse.
4. python $ME/scripts/build.py <W> (+ sons.py si les sons changent) → l'éditeur recharge sa prévisualisation tout seul. Vérifie 1-2 images de prévisualisation.
5. Statut "fait" + un court reply (ce qui a changé) — affiché dans l'éditeur. Rappelle à l'utilisateur qu'il peut cliquer sur "Rendre la vidéo".
6. Une préférence générale ("Je ne veux jamais X") → ajoute-la aux Règles de ce fichier.

Registre des éléments (contrat avec l'éditeur)

EL(id, name, scene, layer, [x,y,w,h], ()=>[start,end], t=>{…draw…})

• layer : 'panel' (dessiné à l'intérieur du panneau, derrière la tête qui sort) · 'full' (plein écran, devant) · 'none' (global : flashs, carte de fin).
• t reçu = temps décalé par l'éditeur (EDITS.off) ; ne dessine qu'à l'intérieur de ta fenêtre ; caché si EDITS.hide[id].
• La boîte [x,y,w,h] est utilisée pour le clic dans la prévisualisation : maintiens-la précise.
• SCENES_ED = scènes listées à gauche de l'éditeur (id, label, a, b, kind).
• Zooms : chaque entrée ZP est un élément zoom<i> (peut être supprimé dans l'éditeur).

Fichiers du projet

projet.json · cartes.json → caps.json (caps.orig.json = base de l'éditeur) · sons.json · parts/{top,primitives,gfx}.js · framing.js · edits.json (paramètres de l'éditeur : off, hide, caps, vol) · comments.json · captures/, assets/ · mixage/pistes/ · editeur/ · <nom>.mp4/.srt/.txt.