morph-edit

Morph Edit (bewegte B-Rolle)

Du erstellst Bewegtgrafik-Clips für das Video eines Creators. Jeder Clip ist eine Form, die nie schneidet: sie morphiert Größe, Ecken und Farbe von Zustand zu Zustand, während ihr Inhalt mit einer kurzen Unschärfe wechselt. Ein Cursor steuert die Änderungen mit echten Klicks und Zügen, und jede Änderung erfolgt auf einem gesprochenen Wort.

Das Ergebnis ist ein Satz von Clips, die der Creator in seinen Editor einfügt. Du erstellst auch einen Vorschaurender ihres Videos mit den eingefügten Clips und zwei HTML-Seiten: eine, um durch die Clips zu schreiten, und eine, um Vorher und Nachher zu vergleichen.

Alles, was du brauchst, befindet sich in diesem Skill-Ordner:

• engine/: die Bewegungsengine (motion.js), die Seitenhülle (base.css), build.py (Clip → eigenständiges HTML), render.js (Einzelbild-Render mit Bewegungsunschärfe), beats.js (Kontaktabzüge von Standbildern), Schriftarten (Geist, OFL).
• scripts/: setup.sh, inspect_video.py, words.py, composite.py, make_pages.py.
• reference/engine-api.md: wie man einen Clip schreibt. Lies es, bevor du deinen ersten Clip schreibst.
• examples/opus-aoe2/: sechs fertige Clips für ein reales 54-Sekunden-Video. Verwende sie als Qualitätsmaßstab und als Ausgangspunkte.

Unten bedeutet $SKILL den Ordner dieses Skills. Arbeite in einem motion/-Ordner im Projekt des Benutzers.

1. Einrichtung (nur beim ersten Mal)

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

Dies prüft auf Node, Python 3 und ffmpeg und installiert Playwright + Chromium in motion/node_modules. Führe jedes Engine-Skript mit NODE_PATH=./motion/node_modules aus.

2. Interview

Verwende das AskUserQuestion-Tool; beschränke es auf eine Runde. Du benötigst:

• Das Video. Ein Pfad. Kopiere es oder verweise darauf als motion/work/source.*.
• Das Transkript. Optional. Wenn es keines gibt (oder nur Klartext), transkribiere das Audio mit scripts/transcribe.py (siehe Schritt 3). Dies liefert echte Wortzeitstempel, die genauer sind als SRT-Schätzungen.
• Dichte:
  • Leicht: 2–4 Clips pro Minute, nur die stärksten Momente.
  • Mittel (Standard): 4–7 pro Minute.
  • Hoch: die meisten Zeilen abgedeckt, mit kurzen Lücken des Gesichts.
• Look:
  • Die Standardpalette: warmgraue Leinwand, schwarze und weiße Komponenten, ein orangefarbener Akzent.
  • Oder ihre Marke: Farben und optional eine Schriftart. Bitte sie, ein Logo, Screenshots oder Markenfarben in motion/inputs/ abzulegen, und lies diese.
• Alles, was zu vermeiden oder einzubeziehen ist. Zeilen, die auf ihrem Gesicht bleiben sollen, echte Zahlen oder Namen zur Anzeige, nachzubildende Produktscreenshots.

Überspringe jede Frage, die der Benutzer bereits beantwortet hat.

3. Das Filmmaterial inspizieren

python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt
# kein Transkript (oder du möchtest exakte Wortzeiten): transkribiere stattdessen das Audio
motion/.venv/bin/python $SKILL/scripts/transcribe.py motion/work/source.mp4 motion/work

transcribe.py schreibt words.txt und transcript.srt. Zeige dem Benutzer das Transkript, damit er falsch gehörte Namen oder Begriffe vor der Planung korrigieren kann.

Schau dir selbst motion/work/contact.png an. video.json liefert Auflösung, fps und Layout-Abschnitte:

• full: Der Sprecher füllt den Rahmen.
• pip: Der Sprecher ist in einer Box und der Rest ist leer. Es enthält die Box-Position und eine Warnung, wenn die Box ihre Größe ändert oder sich bewegt.

Clips müssen der Auflösung und den fps des Videos entsprechen. Wortzeiten aus einem SRT sind Schätzungen (±0,2 s); behandle sie als solche.

4. Planen und vor jedem Code genehmigen lassen

Zeige eine Tabelle mit einer Zeile pro Clip:

| # | Von–Bis | Die abgedeckte Zeile | Was die Form tut, auf welchen Wörtern | Behandlung | Grund |

Kreative Ausrichtung: Entscheide, wie viel vom Rahmen jeder Clip einnimmt. Dies ist die wichtigste Entscheidung; triff sie pro Clip und gib den Grund an.

• Vollbild-Einblendung. Der Rahmen zeigt nur den Sprecher, und die Zeile beschreibt etwas, das man sehen kann: ein Produkt, einen Prozess, einen Vergleich, eine Zahl, einen Kapitelwechsel.
  • Blende für die Dauer der Idee aus (3–10 s), zeige dann wieder das Gesicht.
  • Blende nicht in der ersten Sekunde des Hooks oder bei persönlichen, emotionalen oder meinungsbasierten Zeilen aus.
  • Lasse mindestens ~2s Gesicht zwischen Einblendungen.
• Panel im leeren Raum. Der Schnitt lässt bereits Platz: eine PiP-Box, eine Teilung, einen einfachen Bereich.
  • Rendere einen transparenten Clip (bg:null) zentriert im leeren Bereich, so dimensioniert, dass er zu jedem Zeitpunkt die Box des Sprechers nicht überlappt.
  • Er kann lange laufen (15 s+) als eine einzige durchgehende Morph, da der Sprecher auf dem Bildschirm bleibt.
  • Wenn inspect_video.py eine sich ändernde Box meldet, frage, ob dies beabsichtigt ist, und dimensioniere dann für die größte Box oder teile das Panel an der Änderung.
• Nichts. Die Zeile handelt vom Sprecher oder ist einem anderen Clip zu nahe.

Inhaltsregeln:

• Zeige die realen Objekte des Subjekts: den Ordner, das Terminal, die Datei, das Produkt, das Ergebnis. Entnehme sie den Wörtern. Ordne jede Idee einer Interaktion aus dem Vokabular in reference/engine-api.md zu (Pille + Klick, Fortschritt, Haken, Statusinsel, Karte mit Zug, Schieberegler, Kippschalter, Tabs, Diagramm + Tooltip, Suche/Filter, Datei-Ziehen-und-Ablegen, Terminal-Tippen, Side-by-Side-Vergleich, Kapitelkarte).
• Erfinde niemals Zahlen, Zitate, Preise oder Ergebnisse. Verwende relative Balken, Skeletttextzeilen oder aus dem Transkript entnommene Beschriftungen und liste auf, was illustrativ ist. Füge reale Zahlen nur ein, wenn der Benutzer sie angibt.
• Eine Idee pro Clip. Ein durchgängiger Abschnitt (ein ganzer PiP-Bereich) kann ein einziger langer Clip mit mehreren Zuständen sein.
• Tempo zur Sprache, nicht zur Musik: eine Änderung pro gesprochenem Takt, etwa 0,4–1,2 s auseinander.

Warte auf die Genehmigung oder Bearbeitung des Plans durch den Benutzer.

5. Erstellung

Schreibe ein Fragment pro Clip in motion/clips/NN-name.html, gemäß reference/engine-api.md und den Beispielen. Erstelle dann:

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

Setze jede Zustandsänderung auf ihr Wort: Clip-lokale Zeit = Wortzeit − Clip-Einstiegspunkt.

6. Standbilder auf den Schlüsselwörtern prüfen

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

Wähle die Zeiten, zu denen jeder Zustand zur Ruhe gekommen ist, und ein paar Momente während der Morphs. Sieh dir jedes Blatt selbst an. Korrigiere alles, was beengt, abgeschnitten, unleserlich oder nicht auf dem Wort ist, oder wo der Cursor den Rahmen verlässt. Überprüfe dann noch einmal. Panel-Clips werden auf Schwarz im Blatt gerendert, damit du sie beurteilen kannst.

7. Rendern

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

• Verwende die fps des Videos.
• Panel-Clips (bg:null) müssen als .mov geschrieben werden, was ProRes 4444 mit Alpha liefert.
• Benenne jede Datei nach ihrem Timeline-Einstiegspunkt (0m32s40 = 0:32.40).
• Das Rendern benötigt 4 Unterbilder pro Bild, ist also langsamer als Echtzeit. Führe zwei Clips parallel auf einem Mehrkernrechner aus.

8. Ausliefern

Schreibe motion/plan.json (Schema in reference/engine-api.md). Für UI-Soundeffekte gib jedem Clip eine "sfx": [[Clip-lokale Zeit, Art], …]-Liste, die aus seinen Cues entnommen ist: click und toggle bei Cursor-Klicks, pickup/drop bei Zieh-Start/Ende, whoosh bei Form-Morphs, pop beim Intro und bei Badges, rise/fall bei Balken, type bei Tippen, tick bei erscheinenden Elementen, shutter bei Screenshots und success bei Prüfungen. Dann:

python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/sfx.py motion/plan.json motion/out/preview.mp4   # UI-Soundeffekte, falls der Benutzer sie wünscht
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

Der Benutzer erhält, alles in motion/out/:

• die Clips
• TIMING.md: Datei, Von, Bis, die abgedeckte Zeile, die Behandlung und was illustrativ ist
• preview.mp4: ihr Video mit den eingefügten Clips, harte Schnitte, Originalaudio (plus SFX, falls verwendet)
• sfx/: die Soundeffekte jedes Clips als separate WAV-Dateien zum Mischen in ihrem Editor
• index.html: jeder Clip gleichzeitig in einem Raster abgespielt, mit der vollständigen Vorschau und Links zu den anderen Seiten (diese zuerst öffnen)
• viewer.html: Schritt für Schritt durch die Clips
• compare.html: Original vs. Vorschau, synchronisiert, nebeneinander, gestapelt oder als Wisch

Sage klar, dass die Vorschau zur Überprüfung dient: Für den finalen Schnitt legen sie die Clips in ihren eigenen Editor, wo sie das Timing anpassen, Übergänge hinzufügen und Audio mischen können.

Abonnieren-Karten (optional)

Frage den Creator, ob er eine Abonnieren-Endkarte auf seiner Call-to-Action-Zeile und ein oder zwei kurze Erinnerungen wünscht. Vorlagen sind Clip-Fragmente in $SKILL/templates/subscribe/ (end-card.html, reminder.html). Kopiere eines in motion/clips/ und ersetze dann:

• __CHANNEL__, __HANDLE__ und __AVATAR__ (das Logo oder Foto des Creators als Daten-URI; ohne Bild verwende einen Buchstaben im Kreis). Frage danach; rate niemals einen Namen oder Handle.
• Passe die Konstanten am Anfang des <script> (IN, die Klickzeiten, T) an die eigenen Worte des Creators an. Die Endkarte klickt auf Teilen, Abonnieren, Glocke, Gefällt mir und Kommentar zu den Worten, die der Creator sagt; die Erinnerung klickt auf Abonnieren und Glocke.
• Erstelle, prüfe Standbilder, rendere und füge sie wie jeden anderen Clip zu plan.json hinzu. Rendere die Karte als transparenten .mov-Panel, sodass sie über dem Filmmaterial liegt.

Untertitel (optional)

Erstelle einen SRT in der gesprochenen Sprache und einen englischen SRT zum Hochladen als Untertitel (nicht eingebrannt). Arbeite in motion/work/cap/:

1. motion/.venv/bin/python $SKILL/scripts/captions/find_gaps.py motion/work/words.txt "<video>": Whisper kann bei langen Videos ganze Abschnitte der Sprache auslassen. Es druckt die Lücken; transkribiere sie neu mit retx.py "<video>" "<Lückenliste>" motion/work/gapwords.json [Sprache].
2. python3 $SKILL/scripts/captions/make_cues.py motion/work/words.txt motion/work/gapwords.json motion/work/cap schreibt die Cues und vier Teile.
3. Übersetze die Teile parallel (vier Unteragenten, einer pro Teil) mit templates/caption_brief.md. Jeder schreibt out1..4.json mit {"i","orig","en"} für jeden Cue.
4. Korrigiere markierte Cues, dann schreibt python3 $SKILL/scripts/captions/build_srt.py motion/work/cap motion/out/captions captions_original.srt und captions_english.srt (zwei ausbalancierte Zeilen, maximal 42 Zeichen pro Zeile).
5. Sage dem Creator, er solle den SRT in VLC oder einem ungelisteten Upload testen, bevor er veröffentlicht wird.

Standard-Stil

Die Marke des Benutzers überschreibt diese.

• Farbe: Leinwand #E9E7E2, Tinte #0B0B0B, weiße Komponenten, ein Akzent #FF5A1F. Panel-Clips auf dunklem Filmmaterial verwenden helle Formen (#F4F2EE).
• Schrift und Icons: Geist für UI-Text, Geist Mono für Code, Dateinamen und Terminals. Ein Icon-Set mit einer Strichstärke (M.icon).
• Bewegung: Federn mit höchstens einem winzigen Überschwingen. Vorder- und Hinterkanten reiten auf verschiedenen Federn, sodass Indikatoren sich dehnen. Die Kamera zoomt, sodass jeder Zustand den Rahmen füllt.
• Verboten: Hüpfende Easings, Partikel, Glüheffekte, Farbverläufe auf UI-Chrome, gemischte Icon-Strichstärken, Leerlauf, alles, was wie eine Vorlage aussieht, erfundene Daten.

Fallstricke

• Setze niemals will-change auf etwas, das die Kamera skaliert; Text wird unscharf gerendert.
• Textwechsel innerhalb eines morphierenden Containers benötigen ein eigenes Ein- und Ausstiegs-Timing (M.vis din/lin/lout), sonst überlappen sich alter und neuer Text.
• mix-blend-mode: difference-Beschriftungen müssen in einer Ebene sitzen, die den Mischmodus selbst hat. Ein gefilterter Elterncontainer isoliert sie.
• Elemente, die unter eine Hervorhebung gleiten, benötigen M.FAST-Federn, sonst bleibt die Hervorhebungszeile für einen Moment leer.
• Behalte den Cursor bei jedem Kamera-Zoom im Rahmen, auch während Morphs.
• Wortschätzungen aus einem SRT driften innerhalb eines Cues; setze wichtige Änderungen nach Möglichkeit auf das erste oder letzte Wort eines Cues.
• Ein Clip endet, indem er seinen letzten Zustand hält; die Composite hält das letzte Bild, wenn sein Slot länger ist.