Alirezaaliniya/reel-motion-edit

Reel Motion-Graphics-Schnitt

Verwandelt ein rohes vertikales Video in einen fertigen Motion-Graphics-Schnitt:

Setup → Analysieren → FRAGEN: Stil (Stil-Board) + Vorbereitungsoptionen → Beat-Sheet → plan.json
→ Prüfen + Vorschau-Schleife → Overlay rendern → Komponieren → Überprüfen → ANBIETEN: Untertitel + Extras

Das Overlay ist HTML/GSAP, das Bild für Bild mit transparentem Hintergrund gerendert wird (assets/engine.html). So sind persische Formen, Schriften und Verläufe pixelgenau. Sie schreiben niemals manuell Animationscode: Sie schreiben eine plan.json, die Komponenten und deren Zeiten auflistet. Die Engine animiert sie im gewählten Stil-Preset, das das Aussehen, die Bewegung, Übergänge und die Soundpalette festlegt und jeder Komponente ihre Standard-Soundeffekte zuweist.

Sprechen Sie mit dem Benutzer in seiner Sprache (normalerweise Persisch). Halten Sie die Fortschrittsaktualisierungen kurz.

Warum der Schnitt sich „genau richtig“ anfühlen sollte – und nicht gleichförmig

Zuschauer merken, wenn ein Grafik- oder Soundelement eine halbe Sekunde daneben liegt oder nichts mit dem Gesagten zu tun hat. Das macht einen Schnitt amateurhaft. Frühere Schnitte wurden genau dafür kritisiert: dekorative Abzeichen erschienen über dem Gesicht des Sprechers, die nicht zu dem passten, was er sagte. Später sagte der Benutzer auch, dass die Schnitte anfingen, wiederholend zu wirken. Vier Ideen beheben beides, und die Tools setzen die meisten davon durch:

1. Am Wort verankern. Jeder Text, der die Rede aufgreift, verwendet eine Wortverankerung ("t": "w:رایگان"), sodass er auf der Silbe erscheint, nicht nur ungefähr. Handgetippte Sekunden sind nur für rein visuelle Ereignisse.
2. Am Bild verankern. Klicks, Seitenwechsel und Layout-Zooms stammen aus motion.json-Ereignissen ("t": "m:m12") und aus den von Ihnen selbst gelesenen, mit Zeitstempeln versehenen Kontaktbögen. Ein Klick-SFX ohne sichtbaren Klick ist Rauschen.
3. Das Gesicht schützen. Deklarieren Sie die Gesichts- und PIP-Rechtecke in plan.avoid. render.js check markiert dann jedes Element, das sie überdeckt. Beheben Sie jede COVERS-Warnung vor dem Rendern.
4. Lassen Sie den Benutzer das Aussehen wählen, dann variieren Sie darin. Fragen Sie nach einem Stil, bevor Sie entwerfen (Schritt 2). Verfallen Sie dann nicht jedes Mal in dasselbe Rezept: Variieren Sie das Hook-Format, welche Komponenten die Ideen tragen, und die Übergänge. references/styles.md enthält das Playbook pro Stil und eine Liste von Hook-Formaten.

Schritt 0 – Setup (erster Start auf einem Rechner)

python <skill>/scripts/setup.py

Installiert faster-whisper, puppeteer-core und gsap in ~/.cache/reel-motion-edit/, synthetisiert die SFX-Bibliothek und lädt das Whisper-Modell herunter (large-v3-turbo, ~1,6 GB; es setzt fort und fällt auf hf-mirror.com zurück, wenn huggingface.co blockiert ist oder abbricht). Dies ist der „Lade, was du brauchst“-Schritt, also führen Sie ihn ohne Nachfrage durch. Teilen Sie dem Benutzer in einer Zeile mit, was heruntergeladen wird. Führen Sie es im Hintergrund aus: Das Modell kann bei langsamen Verbindungen eine Weile dauern. In der Zwischenzeit können Sie die visuelle Analyse mit analyze.py --no-transcript durchführen und später für das Transkript erneut ausführen. Führen Sie scripts/sfx.py ~/.cache/reel-motion-edit/sfx erneut aus, nachdem Sie das Skill aktualisiert haben, damit neue Stil-Sounds vorhanden sind.

Wenn Sie ein nützliches zusätzliches Asset finden (eine Schriftart, ein Icon-Set, ein lizenzfreies SFX oder Musikstück), laden Sie es in das Arbeitsverzeichnis herunter. Notieren Sie seine Lizenz in <workdir>/CREDITS.txt. Bevorzugen Sie OFL/CC0-Quellen (Google Fonts, Pixabay/Freesound CC0). Gebündelte Schriftarten: Vazirmatn (Fließtext), Lalezar (Display), Changa (Tech), Lemonada (verspielt), Noto Kufi Arabic (formell). Schriftarten, die der Benutzer lokal installiert hat (z. B. Morabba, IRANSansX, Yekan Bakh) können über plan.fonts hinzugefügt werden und sind oft die markengerechteste Wahl. Suchen Sie in %LOCALAPPDATA%\Microsoft\Windows\Fonts und C:\Windows\Fonts.

Brand-Kit. Wenn ~/.config/reel-motion-edit/brand.json existiert, wendet render.js es automatisch an: style, theme (Markenfarben), fonts, handle (@username-Wasserzeichen), handleCorner, logo. Der Plan überschreibt es; "brand": false ignoriert es für ein Video. Wenn der Benutzer Ihnen eine dauerhafte Präferenz mitteilt (seinen Handle, einen Stil, den er immer möchte, Markenfarben), bieten Sie an, diese dort zu speichern.

Schritt 1 – Analysieren

Erstellen Sie ein Arbeitsverzeichnis neben dem Video (<video dir>/<video name>_edit/) und führen Sie aus:

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

Lesen Sie dann analysis/transcript.txt und jedes analysis/sheets/sheet_*.jpg (10 s pro Blatt, 0,5 s pro Zelle, mit Zeitstempel). Die vom Skript ausgegebenen Bewegungsereignisse (m0 … mN, cut/change) sind Kandidaten. Bestätigen Sie jedes anhand der Blätter, da ein Scrollen auch als „change“ erscheint.

Whisper verschreibt manchmal persische oder englische Produktnamen. Notieren Sie Korrekturen (sie sind wichtig für Untertitel und für Wortverankerungen: Verankern Sie so, wie Whisper das Wort geschrieben hat).

Schritt 2 – Den Benutzer fragen: Stil + Vorbereitungsoptionen (bevor Sie etwas entwerfen)

Verschiedene Videos und Zielgruppen wünschen unterschiedliche Looks, und der Benutzer möchte wählen. Erstellen Sie ein Stil-Board: einen repräsentativen Frame ihres Videos, gerendert in allen 7 Presets, mit einem Titel, Schritt-Chip, Aufkleber und Untertitelzeile. Schreiben Sie zuerst einen minimalen Plan (Video + ein Titel + ein Schlüsselwort + Schritte, wenn das Video Schritte hat), führen Sie dann aus:

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

Wählen Sie T, wo der Frame typisch ist (kein Übergang). Senden Sie das Bild an den Benutzer (SendUserFile, Render anzeigen), fragen Sie dann mit AskUserQuestion. Überspringen Sie die Stil-Frage, wenn das Brand-Kit bereits einen style hat, es sei denn, der Benutzer wünscht etwas anderes.

• F1 – Stil (maximal 4 Optionen: Empfehlen Sie zuerst die beste Passform für diesen Inhalt mit einer einzeiligen Begründung, plus drei kontrastierende Alternativen; sagen Sie, dass die anderen durch „Andere“ eingegeben werden können). Presets: gradient moderner Gradient, bold Pop/Hormozi, neon Tech/Cyber, minimal clean Apple-artig, doodle handgezeichnet, retro VHS, news Broadcast. Beschreibungen finden Sie in assets/styles.json (label, feel).
• F2 – Vorbereitungsoptionen (multiSelect), nur die, die zutreffen:
  • Pausen trimmen (Jump Cuts): tighten.py entfernt Stille länger als ~0,45 s. Am besten für Talking-Head-Videos. Bei Bildschirmaufnahmen warnen Sie, dass stille Abschnitte sein können, wo geklickt wird. Es ändert die Timeline, läuft also vor der Analyse: Führen Sie die Analyse erneut für die getrimmte Datei durch.
  • Stimmbereinigung: "voice": "enhance" (Entrauschen, Rumpel-Cut, Präsenz, sanfte Kompression). Empfehlen Sie es für Telefon- oder Raum-Audio.
  • @handle-Wasserzeichen: Fragen Sie nach dem Handle, wenn das Brand-Kit keinen hat.
  • Hintergrundmusik: Nur, wenn der Benutzer einen Track hat oder möchte, dass Sie einen CC0-freien finden. Sie wird automatisch unter die Stimme geduckt.

Wenn der Benutzer den Schnitt einfach möchte und es ihm egal ist, wählen Sie für ihn aus, sagen Sie ihm, welchen Stil Sie gewählt haben und warum, und fahren Sie fort.

Schritt 3 – Beat-Sheet (denken Sie, bevor Sie entwerfen)

Schreiben Sie <workdir>/beats.md: eine Zeile pro Beat mit Zeitbereich, was gesagt wird, was gezeigt wird und das Layout (Ganzgesicht / Bildschirm + PIP unten links / Handheld-Bildschirm / …). Markieren Sie:

• den Hook (erste 1–3 s): Wählen Sie ein Hook-Format aus references/styles.md, ein anderes als beim letzten Mal, wenn Sie es wissen
• jeden Schritt / jede Idee, die der Sprecher erklärt
• den Höhepunkt-Moment (gezeigtes Ergebnis: „verbunden“, „erledigt“, die Zahl)
• den CTA am Ende
• Layout-Änderungen (Zoom zwischen Kamera und Bildschirm): Übergangspunkte
• die Sicherheitszonen pro Layout: wo Overlays platziert werden können, ohne das Gesicht, den Cursor oder die demonstrierte Sache zu verbergen

Lesen Sie references/styles.md (das Playbook des gewählten Stils) und references/creative-direction.md (Tempo, Platzierung, SFX-Regeln). Sie sind kurz und sie sind der Unterschied zwischen „überladen“ und „professionell“.

Schritt 4 – plan.json

Schreiben Sie <workdir>/plan.json. Alle Komponenten, ihre Eigenschaften und Standard-SFX finden Sie in references/components.md. Lesen Sie es, bevor Sie den Plan schreiben. Minimale Form:

{
  "video": "D:/videos/vpn firefox.mp4",
  "size": [1080, 1920], "fps": 30,
  "style": "neon",
  "voice": "enhance",
  "handle": {"text": "@your_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": "آموزش ۶۰ ثانیه‌ای"}
}

Lassen Sie den Stil das Aussehen bestimmen. Lassen Sie visuelle Eigenschaften (theme-Farben, style/rotate/from des Schlüsselworts, kind des Übergangs, anim des Titels, Untertitel-Stil) ungesetzt, es sei denn, Sie haben einen semantischen Grund (Rot für einen Fehler, eine Markenfarbe). Das Preset füllt sie aus, und das macht die Stile unterschiedlich. Ein Übergang ohne kind durchläuft die Übergänge des Stils. theme im Plan überschreibt nur das Preset (z. B. die Markenfarbe des Produkts).

Text-Syntax: *wort* oder *zwei wörter* = Hervorhebung, `latin` = isolierter LTR-Lauf (hält „VPN“/URLs davon ab, innerhalb von RTL-Text umzukehren).

Schritt 5 – Prüfen, Vorschau, Korrigieren (Schleife)

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 gibt die aufgelöste Timeline aus und prüft auf:

• COVERS: Ein Element überdeckt eine geschützte Zone
• OFFFRAME
• CLUTTER: Mehr als 3 Overlays gleichzeitig
• SFXPILE: Sounds, die innerhalb von 0,35 s gestapelt sind
• ORDER: Eine Wortverankerung traf ein früheres Vorkommen, also verwenden Sie w:wort#2

Beheben Sie jedes Problem. Dann sehen Sie sich build/preview.jpg an: Wählen Sie Zeiten während der Animation für jedes wichtige Element und überprüfen Sie, dass Beschriftungen und Wellen genau auf ihren Zielen sitzen. Lesen Sie Koordinaten aus Vollbild-Frames (ffmpeg -ss T -i video -frames:v 1 f.png) ab, anstatt aus Miniaturen zu raten. Iterieren Sie, bis es stimmt. Vorschauen sind billig, vollständige Renderings nicht.

Schritt 6 – Rendern und Komponieren

node <skill>/scripts/render.js "<workdir>/plan.json" full        # build/overlay.mov (≈3–6 min / Minute Video)
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 — Beitrags-Cover (unscharfer Frame T + Titel)

Führen Sie das vollständige Rendern im Hintergrund aus. compose.py macht Folgendes:

• Wendet die Kamerabewegungen nur auf das Video an
• Legt die Grafiken darüber
• Wendet die voice-Bereinigung an, falls gesetzt
• Mischt das SFX-Bett unter die Stimme, plus Musik mit Ducking, falls gesetzt: "music": {"file": "...", "db": -20}
• Normalisiert auf −14 LUFS

Überschreiben Sie niemals das Quellvideo. Schreiben Sie eine neue Datei, mit einem Versionssuffix (- edit v2) bei Neurenderungen.

Schritt 7 – Überprüfen

Erstellen Sie einen Kontaktbogen der Ausgabe (ffmpeg -i out.mp4 -vf "fps=1/2,scale=216:-1,tile=10x3" sheet.jpg) und sehen Sie ihn sich an. Überprüfen Sie, dass die Dauer übereinstimmt und Audio vorhanden ist. Berichten Sie ehrlich, was Sie überprüft haben (Frames) und was Sie nicht konnten (Sie können nicht hören; das SFX-Timing wird anhand der Ereignisliste überprüft, nicht nach Gehör).

Schritt 8 – Untertitel und Extras anbieten (immer, am Ende)

Sobald der Schnitt geliefert wurde, fragen Sie mit AskUserQuestion (multiSelect, wo es passt). Bieten Sie nur an, was nicht bereits erledigt wurde:

• Untertitel: 3–4 Stile aus references/caption-styles.md, mit dem Standard des gewählten Stils (captions in styles.json) zuerst empfohlen und der Begründung basierend auf diesem Video.
• Beitrags-Cover-Bild (render.js cover).
• Instagram-Bildunterschrift: Schreiben Sie <workdir>/post.txt aus dem Transkript: eine Hook-Zeile, 2–4 kurze Zeilen mit Wert, der CTA, der Link oder das Kommentar-Schlüsselwort, das der Sprecher erwähnt hat, und 8–15 relevante persische + englische Hashtags.
• Im Brand-Kit speichern: den gewählten Stil, Handle und Farben, damit das nächste Video dort beginnt.
• Eine andere Stil-Version: Rendern Sie denselben Plan mit einem anderen style für A/B-Tests neu (nur das Overlay ändert sich).

Für Untertitel:

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"

Lesen Sie die gedruckten Blöcke Korrektur. Korrigieren Sie Whisper-Schreibweisen mit --fix; eine mehrwortige Quelle führt Tokens zusammen. Fügen Sie "captions": {"file": "captions.json"} zum Plan hinzu (Stil standardmäßig auf das Preset; setzen Sie "style" zum Überschreiben), führen Sie check aus (Untertitel dürfen weder das Gesicht noch die Aufkleber überdecken), rendern und komponieren Sie dann erneut als neue Version.

Fallstricke

• Elemente in Bildschirmkoordinaten (Klick, Hervorhebung, Beschriftungspfeile) sind falsch ausgerichtet, wenn eine Kamerabewegung denselben Abschnitt zoomt. Verwenden Sie Kamerabewegungen nur bei Talking-Head-Abschnitten.
• Camtasia-artige animierte Zooms zwischen Gesicht und Bildschirm dauern ~0,5 s. Setzen Sie das Übergangselement an den Anfang des Zooms und platzieren Sie in diesem Fenster keinen Text auf dem Bildschirm.
• steps.hide verbirgt den Schritt-Chip während Ganzgesicht-Abschnitten und bringt ihn danach zurück.
• Whisper-Wort-Zeitstempel können beim ersten Wort nach einer Pause ~0,1 s zu spät sein. Für harte Einschläge (Titel-Slam) mit -0.05 nachjustieren.
• Quellen, die nicht 1080×1920 sind (z. B. 608×1080 Telefon-Exporte), werden von compose und preview auf die Plangröße hochskaliert/beschnitten. Plan-Koordinaten sind immer in Plan-Größen-Pixeln, also multiplizieren Sie Koordinaten, die aus Quell-Frames gelesen wurden, mit 1080 / source_width.
• Handgefilmtes Telefonmaterial eines Monitors: Der Bildschirm driftet, daher bleiben bildschirmfixierte Elemente (Klick, Hervorhebung, Pfeile) nicht auf dem Ziel. Verwenden Sie stattdessen Struktur (Schritte), wortverankerte Aufkleber in den Rändern und Vollbild-Übergänge.
• Titel erhalten standardmäßig eine dunkle obere Blende ("scrim": false zum Entfernen). Sie hält sie auf hellen Bildschirmen lesbar.
• Lassen Sie die eigene Stimme des Sprechers unberührt (kein EQ/Kompression über die Lautheitsnormalisierung hinaus).