Montage-Editeur

Motion-Graphics-Schnitt + Bearbeitungsoberfläche

Sprich mit dem Benutzer in seiner Sprache. Schreibe Untertitel in den exakten Worten des Sprechers (niemals paraphrasieren).

Pfade: ME = dieses Skill-Verzeichnis, W = ein Projektordner pro Video. Alle Skripte sind bash/python/node; scripts/env.sh findet ffmpeg, node, python, Chrome und die gebündelte Engine (engine/). Beim ersten Mal: siehe README.md → Installation (npm install im Skill-Ordner, pip install -r requirements.txt).

Regeln (nicht verhandelbar)

1. Nur offizielle Logos für jede genannte Marke – niemals ein nachgezeichnetes „inspiriertes“ Icon. Hole es von der Website der Marke (capture_site.js) oder frage den Benutzer.
2. Brand Charter: Für einen Kunden lese Farben, Schriftarten und Logo von seiner Website (captures/info.json) und schreibe die Palette oben in parts/top.js. Für die eigenen Videos des Benutzers frage einmal nach seiner Charter und behalte sie in theme.json + top.js.
3. Website-Captures: Erfasse die Seite des Kunden (vollständige Seiten, Desktop + Mobil) und verwende sie in Panels (scrollender Browser, zugeschnittene offizielle Illustrationen). Cookie-Banner werden ausgeblendet, niemals akzeptiert. Eingeloggte Produktseiten sind nicht erreichbar: sage dies und biete an, Screenshots des Benutzers zu integrieren.
4. Rhythmus: Vollbild ↔ Panels (Zoom OUT rein, Zoom IN raus), Punch-Ins bei starken Wörtern (~alle 2-3 s), genau ein besonderer Moment (Logo-/Namenseinblendung), Hintergrundmusik unter der Stimme abgesenkt, Soundeffekte (Whoosh bei jedem Zoom, Pops, Klicks, Tippgeräusche, Impact bei der Einblendung), Lichtblitz bei Jump Cuts.
5. Bezahlte Anzeigen: Nichts Wichtiges in den oberen 14 % (y < 270) noch unterhalb von y ≈ 1250 (Reels/TikTok-UI); Untertitel angehoben (CAPDY); keine Untertitel innerhalb von Panels (das Panel zeigt die Wörter als Titel); Endkarte = Markenlogo + URL + die Worte des Sprechers; keine erfundenen Behauptungen oder Zahlen.
6. Untertitel niemals auf dem Gesicht. LTR-Sprachen → "sens": "ltr" in projet.json (der Build fixiert die Wortreihenfolge); RTL (Arabisch) → "rtl". Markenname als Pille (fx: "pill", Farben in projet.json → pill).
7. Mix: Der Benutzer stellt Stimme / Musik / Effekte im Editor ein. Standardwerte: Stimme 100 %, Musik 46 %, Effekte 36 %. Immer Lautstärke normalisieren auf -14 LUFS.
8. Jede Animation ist ein Registry-ELEMENT (siehe unten), damit der Benutzer es auswählen, verschieben, ausblenden und kommentieren kann. Keine Animation außerhalb der Registry.
9. Anker: Jedes wS(card, word) muss auf das Wort zeigen, das die Animation illustriert – führe scripts/ancres.py aus und lies die Tabelle; rate niemals einen Index.

Arbeitsablauf

1. Vorbereiten: bash $ME/scripts/preparer.sh <video> <W> <lang> "<Whisper-Prompt: Eigennamen>" → kopierte Quelle, Vollbild-Zuschnitt, Einzelbilder, wahrscheinliche Schnitte, wortgenaues Transkript. Dann die Person im Hintergrund freistellen (~1 s/Bild; Whisper nicht gleichzeitig ausführen – RAM): python $ME/engine/mask.py u2net_human_seg <W> && python $ME/engine/make_head.py <W>.
2. Kunde (falls vorhanden): node $ME/scripts/capture_site.js <url> <W> → captures/, assets/logo-*.png, Farben/Schriftarten. Sieh dir die Captures an; schneide brauchbare Grafiken in W/assets/ zurecht (Illustrationen, eine lange Seite für einen scrollenden Browser).
3. Untertitel: Schreibe W/cartes.json (exakte Wörter + Whisper-Zeitstempel; 2-5-Wort-Karten; hot, fx) → python $ME/scripts/cartes.py <W>. Vorlage: templates/cartes.EXAMPLE.json.
4. Schnittplan: Teile das Skript in Takte auf (Hook, Problem, Produkt, Beweis, CTA…), wähle für jeden: Vollbild oder Panel, welches konkrete Objekt gezeigt wird, ein besonderer Moment, Sounds. Schreibe W/plan-montage.md (Vorlage templates/plan.EXAMPLE.md) und zeige es dem Benutzer kurz vor dem Animieren.
5. projet.json (Vorlage templates/projet.EXAMPLE.json): nom, titre, langue, sens, outro, vol, musique_gain, pill, coupes, cadrage (Aufnahmen, die in ein Panel gehen → Messfenster), cadrage_force falls die Maske den Hintergrund erwischt. Dann python $ME/scripts/framing.py <W>.
6. Szenen in 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, ein EL(...) pro Animation, Ebenen, Endkarte, Schriftarten).
7. Sounds: W/sons.json (Vorlage templates/sons.EXAMPLE.json): musique {bpm, intro_filtree, coupure = Stille vor einer Einblendung, accords} und events = [element|null, zeit|"fin+x", "sound[:param]", gain, [repeat, step]]. Sounds: 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. Verknüpfe jeden Sound mit seinem Element, damit er folgt, wenn das Element verschoben oder ausgeblendet wird.
8. Anker: python $ME/scripts/ancres.py <W>.
9. Vorschauen: python $ME/scripts/build.py <W> dann node $ME/engine/04_render_frames.js <W> preview t1 t2 … → Kontaktabzug → überprüfe wie ein anspruchsvoller Redakteur (lesbar? Gesicht klar? Werbe-Safe-Zonen?) und behebe Fehler vor dem Rendern.
10. Rendern: bash $ME/scripts/rendu.sh <W> (Hintergrund, 3-6 min) → <nom>.mp4 (+ .srt/.txt), Stems in mixage/pistes/, Editor-Medien. Überprüfe 6-8 Einzelbilder der MP4, -14 LUFS, Größe.
11. Editor: Starte python $ME/scripts/editor_server.py <W> <port> (in Claude Code Desktop: füge es zu .claude/launch.json hinzu und verwende das Vorschau-Tool), öffne http://localhost:<port>/editeur/. Überprüfe die Vorschau, Klick-zum-Auswählen und Wiedergabe.
12. Kommentare überwachen: Überwache W/comments.json und gib eine Zeile pro neuem Kommentar mit status == "à faire" aus (Befehl in references/editor.md).

Verarbeiten eines Kommentars

1. Lies ihn (target = el:<id> | scene:<id> | cap:<n> | audio:<track>, t, Klick x,y).
2. Setze Status „en cours": POST /api/comments/status {"id":…,"status":"en cours"}.
3. Ändere das Element in parts/gfx.js (oder top.js für Zooms/Panels, cartes.json für Untertitel, sons.json für Sounds), bleibe dabei innerhalb der Charter und der Registry. Falls die Anfrage vage ist, wende die beste Option an und erwähne eine Alternative in der Antwort.
4. python $ME/scripts/build.py <W> (+ sons.py falls Sounds geändert) → der Editor lädt seine Vorschau von selbst neu. Überprüfe 1-2 Vorschaubilder.
5. Status „fait" + eine kurze reply (was geändert wurde) – wird im Editor angezeigt. Erinnere den Benutzer daran, dass er auf „Video rendern" klicken kann.
6. Eine allgemeine Präferenz („Ich möchte nie X“) → füge sie zu den Regeln dieser Datei hinzu.

Element-Registry (Vertrag mit dem Editor)

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

• layer: 'panel' (innerhalb des Panels gezeichnet, hinter dem herausragenden Kopf) · 'full' (Vollbild, davor) · 'none' (global: Blitze, Endkarte).
• t empfangen = vom Editor verschobene Zeit (EDITS.off); zeichne nur innerhalb deines Fensters; ausgeblendet wenn EDITS.hide[id].
• Die Box [x,y,w,h] wird zum Klicken in der Vorschau verwendet: halte sie genau.
• SCENES_ED = Szenen, die links im Editor aufgelistet sind (id, label, a, b, kind).
• Zooms: Jeder ZP-Eintrag ist Element zoom<i> (kann im Editor entfernt werden).

Projektdateien

projet.json · cartes.json → caps.json (caps.orig.json = Editor-Basis) · sons.json · parts/{top,primitives,gfx}.js · framing.js · edits.json (Editor-Einstellungen: off, hide, caps, vol) · comments.json · captures/, assets/ · mixage/pistes/ · editeur/ · <nom>.mp4/.srt/.txt.