Communitygithub.com

MBehtemam/montagent-skills

Motion Graphics und Titel in Montagent: Erstellen von Launch Spots, Produkt- und Social Ads, Intros und Outros, Kinetic- und Schreibmaschinentext, Logo-Reveals und -Loops, Wipes, Pops, Farbwechseln, Card Flips, Door Swings in Perspektive und Trailer-Effekten (Slammed Titles, Glitch Cuts, HUDs). Verwenden Sie dies, wenn ein Montagent-Video aus Grafiken und Text besteht, anstatt aus Filmmaterial oder einer Figur.

Was ist montagent-skills?

Diese Skill-Dokumentation beschreibt umfassend, wie man Motion Graphics und Titel in der Montage-Software **Montagent** erstellt. Sie richtet sich an Entwickler und KI-Agenten, die automatisierte Video-Generierung mit Fokus auf Grafikelemente, Formen, Standbilder und Texte erstellen möchten, im Gegensatz zu footage- oder charakterbasierten Videos. Die Skill deckt eine breite Palette an Effekten ab: Launch Spots, Logo-Reveals, Trailer-Effekte (Slammed Titles, Glitch Cuts, HUDs), sowie detaillierte Rezepte für Animationen wie Pop-Effekte, Wipe-Reveals, Farbwechsel in Textzeilen, kinetische und Schreibmaschinentexte sowie reibungslose Übergänge (Push, Slide, Wipe). Die Dokumentation betont die präzise Planung mittels eines Beat-Sheets und die Verwendung von Generator-Skripten für Flexibilität bei Timing-Änderungen. Es werden konkrete JSON-Codebeispiele für Montagent-Projekte gegeben, die die Parameter für Framegröße, Timing, Kurven (Easing), Effekte und Validierungsschritte zeigen. Die Skill ist plattformunabhängig, aber speziell auf die native Funktionalität von Montagent zugeschnitten und nutzt deren Rendering-Pipeline (Text, Formen, Masken, Transitions) für optimale Performance und valide Ausgaben.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/MBehtemam/montagent-skills/tree/HEAD/skills/montagent-motion

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Motion Graphics und Titel

Rezepte für Stücke aus Formen, Standbildern und Text. Sie werden im Build-Schritt in montagents Schleife eingefügt; laden Sie zuerst montagent, falls noch nicht geschehen.

Öffnen Sie die Referenzdatei für die Art des Stücks, bevor Sie es planen:

Das StückÖffnen
Launch Spot, Produkt- oder Social Ad, Intro, Outrodie Launch-Spot-Struktur
Logo-Reveal, Logo-Sting, alles, was looptder Logo-Loop
Trailer oder jeder Slam-, Glitch-, Blink- oder HUD-EffektTrailer-Effekte

Lesen Sie für ein neues Stück oder ein Redesign die kreative Richtung, bevor Sie das Layout wählen. Sie behandelt visuelle Konzepte, Komposition und Choreografie in nativem Montagent. Bearbeiten Sie für eine spezifische Bearbeitung nur das relevante Rezept und bewahren Sie die vorhandene Ausrichtung.

Planen Sie mithilfe eines Beat-Sheets

Bevor Sie ein Element schreiben, schreiben Sie das Beat-Sheet: jeden Eingang, Farbwechsel, Schnitt und Ausgang in einer Tabelle, jeder auf einem Beat des Rasters, den montagent-craft vorgibt (sein Tempo, Downbeat, Frame-Snapping und welche Ereignisse auf Beats liegen).

Erstellen Sie das Projekt mit einem Generator-Skript aus dem Beat-Sheet, sodass eine Neuzeitangabe eine einzeilige Bearbeitung ist.

Rezepte

Jedes Rezept gibt Startbereiche an, keine endgültigen Werte. Jedes endet mit einem Look-Schritt: laden Sie montagent-craft, dann schauen Sie, wo der Schritt sagt, bevor Sie fortfahren.

Pop

Ein Eingang mit kleinem Überschwingen, der sich dann setzt. Der Überschwinger ist die Kurve: ein Keyframe-Paar mit einem Bezier, dessen y über 1 geht, nicht drei Keyframes.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/pop.mp4",
  "tracks": [
    {"name": "badge", "layer": 10, "elements": [
      {"id": "badge", "type": "ellipse", "start": 500, "end": 2000, "x": 960, "y": [{"t": 500, "v": 580}, {"t": 900, "v": 540, "ease": [0.34, 1.56, 0.64, 1]}], "origin": "center", "width": 240, "height": 240, "fill": "#FF5A36", "scale": [{"t": 500, "v": [0.5, 0.5]}, {"t": 900, "v": [1.0, 1.0], "ease": [0.34, 1.56, 0.64, 1]}]}
    ]}
  ]
}
  • Länge: 300–450 ms. Kürzere Snaps, längere Schwebungen.
  • Start-Skalierung: 0.5–0.7 für Text und Karten; 0 für kleine Formen und Badges.
  • Überschwingen: [0.34, 1.56, 0.64, 1] überschreitet etwa 10 %. Erhöhen Sie die zweite Zahl auf 1.8 für etwas Verspieltes oder senken Sie sie auf 1.3 für etwas Konservatives. Behalten Sie eine Kurve für jeden Pop in einem Stück bei.
  • Aufwärtsbewegung: 20–60 px Reise auf y mit derselben Kurve verleiht Gewicht. Überspringen Sie es bei Pops, die in einer Reihe sitzen.
  • Staffelung: ein Beat, wenn jedes Element auf seinem eigenen Beat landet; 60–120 ms zwischen Elementen innerhalb eines Beats.
  • Look: frame am Anfang plus 40 % der Länge, wo der Überschwinger seinen Höhepunkt erreicht, und überprüfen Sie, ob nichts den Rahmenrand oder einen Nachbarn schneidet. Dann preview eine Spanne von kurz vor dem ersten Pop bis kurz nach dem letzten.

Halten, dann ausblenden

Der letzte Keyframe eines Eingangs hält bereits, daher kostet ein Halten nichts. Ein Ausgang beginnt mit einem Keyframe beim gehaltenen Wert, in dem Moment, in dem der Ausgang beginnt. validate meldet diesen Keyframe als R-EASE-INERT, und die Ergebnisdokumentation erklärt, warum dies erwartet wird.

  • Ausgangslänge: 200–350 ms, ease-in. Ausgänge laufen schneller als Eingänge.
  • Ausgangsbewegung: ein Weichzeichner plus 20–40 px Reise oder Skalierung auf 0.9. Verwenden Sie für einen harten Schnitt einen einzelnen step-Keyframe zum neuen Wert (siehe das Starter-Projekt-Titel).
  • Haltelänge: die Lesezeit, die montagent-craft vorgibt.
  • Gruppenausgänge: Die gesamte Gruppe verlässt gleichzeitig oder gestaffelt um 30–60 ms in Lesereihenfolge.
  • Look: frame auf dem letzten gezeichneten Frame vor dem Ausgang und überprüfen Sie, ob die gesamte Gruppe vollständig eingeblendet und in Ruhe ist.

Farbwechsel bei einem Wort

Färben Sie ein Wort innerhalb seiner Zeile mit einem highlight auf dem Lauf dieses Wortes, beginnend auf dem Beat. Dies behält ein Element: Es gibt keine zweite Kopie zum Überblenden, und die eigene Farbe des Elements bleibt die Zeilenfarbe.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/accent.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "line", "layer": 20, "elements": [
      {"id": "line", "type": "text", "start": 0, "end": 3000, "x": 960, "y": 540, "origin": "center", "width": 1600, "height": 140, "font": "title", "size": 110, "color": "#F5F0E6", "align": "center", "runs": [{"text": "Video your agent can "}, {"text": "read.", "highlight": {"start": 2000, "end": 3000, "color": "#FF5A36"}}], "caption": false}
    ]}
  ]
}
  • Timing: Der Wechsel findet auf einem Beat statt, niemals beim Eingang des Wortes. Geben Sie dem Auge mindestens einen halben Beat Zeit, das Wort zuerst zu lesen.
  • Betonung: Wenn das Wort ein eigenes Element ist, lässt ein Skalierungssprung auf demselben Beat (1.0 auf 1.06–1.1 und zurück über 200–300 ms) den Wechsel wirken.
  • Look: frame einen Frame vor und einen Frame nach dem Wechsel und überprüfen Sie, ob nur das eine Wort geändert wurde.

Kinetischer und Schreibmaschinentext

Wenn jeder Buchstabe, jedes Wort oder jede Zeile eine gemeinsame Bewegungskurve in einem regelmäßigen Schritt (every ms) teilt, behalten Sie ein einzelnes text-Element und staffeln es mit units (by: letter, word oder line; order: forward, reverse, center_out oder edges_in). Hier verdampft eine Überschrift von der Mitte nach außen in den Fokus:

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/evaporate.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "title", "layer": 20, "elements": [
      {"id": "evaporate", "type": "text", "start": 0, "end": 2000, "x": 960, "y": 540, "origin": "center", "width": 1400, "height": 160, "font": "title", "size": 108, "color": "#F5F0E6", "align": "center", "runs": [{"text": "SHARP FOCUS"}], "units": {"by": "letter", "order": "center_out", "every": 45, "y": [{"t": 0, "v": 20}, {"t": 360, "v": 0, "ease": "ease-out"}], "opacity": [{"t": 0, "v": 0}, {"t": 360, "v": 1, "ease": "ease-out"}], "blur": [{"t": 0, "v": 24}, {"t": 360, "v": 0, "ease": "ease-out"}]}, "caption": false}
    ]}
  ]
}
  • Verdampfen / optischer Fokuseintritt (blur): Key blur innerhalb von units von 16–32 px auf 0 über 300–450 ms (ease-out), gepaart mit opacity (0 -> 1) und einem kleinen y-Hub (16–28 px -> 0) oder scale ([1.08, 1.08] -> [1.0, 1.0]). Sobald blur 0 und opacity 1 erreicht hat, nimmt der Renderer den schnellen Pfad ohne zusätzliche Ebenenkosten.
  • Symmetrische Reihenfolgen (center_out, edges_in): center_out beginnt bei der mittleren Einheit (oder dem mittleren Paar, wenn die Anzahl gerade ist) und tritt schrittweise nach außen zu beiden Enden; edges_in beginnt gleichzeitig bei der ersten und letzten Einheit und konvergiert zur Mitte.
  • Wanderwelle (A -> peak -> A): Schreiben Sie anstelle eines After Effects Range Selectors (triangle, round oder smooth) eine Drei-Keyframe-Rückkehrkurve in units – zum Beispiel "y": [{"t": 0, "v": 0}, {"t": 180, "v": -28, "ease": "ease-out"}, {"t": 360, "v": 0, "ease": "ease-in-out"}] (oder ein scale / blur-Puls) – und lassen Sie every den Peak über die Zeile wellen. Um ein einzelnes Wort oder einen Buchstaben mit benutzerdefiniertem Timing hervorzuheben, teilen Sie es in einen eigenen Lauf mit unit.
  • Glyphen als text behalten (niemals Glyphen in path konvertieren): path-Elemente haben eine Kontur (points ohne holes), daher füllt die Konvertierung von Glyphen mit mehreren Konturen (O, A, B, 8, i, ?, %) in path innere Zähler fest oder entfernt Inseln (ADR-0224). Behalten Sie Text als text und gestalten oder animieren Sie ihn mit stroke, units, path und effects.
  • Unregelmäßige Beat-Zeiten oder Schreibcursor (scripts/type_on.py): Wenn Wörter auf unregelmäßigen Beat-Zeitstempeln landen oder Buchstaben einen schrittweisen cursor benötigen, führen Sie python3 scripts/type_on.py <projekt> <spezifikation> aus (--help für die Spezifikation). Es misst die Zeile mit measure und gibt ein text-Element pro Einheit aus ("by": "word" mit "enter": "pop" und times / highlights, oder "by": "letter" bei 60–150 ms mit einem blinkenden cursor), wobei jedes als caption: false markiert wird.
  • Nachverfolgte Titel: Teilen Sie den Titel nicht in Buchstaben auf. Schreiben Sie ein text-Element mit letter_spacing, in Tausendsteln eines em (size × letter_spacing / 1000 px nach jedem Buchstaben; negativ zieht zusammen). Keyframe, um einen Titel auseinanderziehen zu lassen: "letter_spacing": [{"t": 0, "v": 0}, {"t": 800, "v": 120, "ease": [0.65, 0, 0.35, 1]}]. Jeder Nicht-Null-Wert schaltet die optionalen Ligaturen aus, und ein verbindendes Skript wie Arabisch nimmt keinen Abstand.
  • Vertikale Spalten und seitliche Banner: Montagent hat keine writing_mode-Eigenschaft (ADR-0224). Für eine aufrechte gestapelte Spalte (CJK-Vertikalkopie oder ein gestapelter Marquee), verbinden Sie Grapheme mit \n ("text": "東\n京\n都") in einer schmalen text-Box mit "align": "center" und "line_height": 1.0 oder 1.1; behalten Sie 2–3 horizontale Ziffern oder lateinische Initialen in einer Zeile ("text": "第\n25\n回", Tate-chu-yoko) und staffeln Sie mit "by": "line", sodass die horizontale Zahl als eine Einheit bewegt wird. Für ein seitliches lateinisches Banner, setzen Sie ein horizontales text-Element und drehen Sie es mit "rotation": -90 (liest von unten nach oben) oder "rotation": 90 (liest von oben nach unten).
  • Look: preview die Spanne der hereinkommenden Zeile. Dann frame sie in Ruhe und überprüfen Sie, ob der Abstand wie eine Zeile liest, mit keiner größeren Lücke an einer Wort- oder Buchstabengrenze.

Enthüllen durch Wipe

Ein Wipe deckt etwas auf, indem eine Kante darüber gleitet. Platzieren Sie einen Occluder über dem Objekt: ein Rechteck, das genau mit dem gefüllt ist, was hinter dem Objekt ist. Dann verkleinern Sie den Occluder um seine ferne Kante, sodass seine nahe Kante darüber hinwegfegt. Ein Akzentbalken, der auf dieser Kante reitet, macht den Wipe als absichtlich lesbar.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/wipe.mp4",
  "tracks": [
    {"name": "mark", "layer": 10, "elements": [
      {"id": "mark", "type": "image", "start": 0, "end": 2000, "source": "media/still.png", "x": 960, "y": 540, "origin": "center", "width": 360, "height": 360, "fit": "contain"}
    ]},
    {"name": "occluder", "layer": 11, "elements": [
      {"id": "occluder", "type": "rect", "start": 0, "end": 1000, "x": 1160, "y": 540, "origin": "center-right", "width": 400, "height": 400, "fill": "#101418", "scale": [{"t": 400, "v": [1.0, 1.0]}, {"t": 900, "v": [0.0, 1.0], "ease": [0.65, 0, 0.35, 1]}]}
    ]},
    {"name": "edge", "layer": 12, "elements": [
      {"id": "edge", "type": "rect", "start": 400, "end": 1000, "x": [{"t": 400, "v": 760}, {"t": 900, "v": 1160, "ease": [0.65, 0, 0.35, 1]}], "y": 540, "origin": "center", "width": 16, "height": 420, "fill": "#FF5A36", "opacity": [{"t": 900, "v": 1.0}, {"t": 1000, "v": 0.0, "ease": "ease-in"}]}
    ]}
  ]
}
  • Länge: 400–600 ms, [0.65, 0, 0.35, 1]: ein Schwung, der sanft beginnt und endet.
  • Occluder: 20–40 px größer als das Objekt auf jeder Seite und die gleiche Füllung wie der Hintergrund dahinter. Der Start-Keyframe sitzt dort, wo der Wipe beginnt, sodass das Objekt bis dahin abgedeckt bleibt.
  • Kantenbalken: 8–24 px breit, 5–10 % höher als der Occluder, bewegt sich auf derselben Kurve und Zeit. Er verlässt den Occluder über 100–200 ms, sobald der Schwung erledigt ist.
  • Richtung: Wipe in Leserichtung; zum Abwischen vergrößern Sie den Occluder von der nahen Kante zurück.
  • Unruhiger Hintergrund: Ein Occluder funktioniert nur über einer einfarbigen Fläche. Über einem Foto, einem Verlauf oder Filmmaterial, keyen Sie stattdessen die eigene mask des Elements: {"name": "mask", "shape": "rect", "x": 0, "y": 0, "width": [{"t": 400, "v": 0}, {"t": 900, "v": 400, "ease": [0.65, 0, 0.35, 1]}], "height": 400} deckt ein 400 × 400 Element von seiner linken Kante aus auf, ohne Occluder. Das Rechteck ist elementlokal, von der oberen linken Ecke des Elements; eine Maske mit der Breite 0 verbirgt das Element, sodass die Enthüllung abgedeckt beginnt. Fügen Sie feather für eine weiche Kante hinzu.
  • Look: frame in der Mitte des Schwungs und überprüfen Sie, ob der Kantenbalken die Kante des Occluders genau abdeckt; dann frame direkt nach dem Schwung und überprüfen Sie, ob nichts vom Occluder übrig ist.

Übergeben mit einem Push, Slide oder Wipe

Um von einer Karte, einem Standbild oder einer Szene zur nächsten mit Bewegung zu gelangen, überbrücken Sie die beiden mit einem transition vom Typ push, slide oder wipe. Keyed x auf beiden Elementen würde an der Verbindungsstelle auseinanderdriften; der Übergang hält die beiden Hälften pixelgenau verbunden, und validate überprüft dies.

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/handover.mp4",
  "tracks": [
    {"name": "first", "layer": 10, "elements": [
      {"id": "card-1", "type": "rect", "start": 0, "end": 1700, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#FF5A36"}
    ]},
    {"name": "second", "layer": 11, "elements": [
      {"id": "card-2", "type": "rect", "start": 1200, "end": 3000, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#2E86FF"}
    ]},
    {"name": "handover", "layer": 12, "elements": [
      {"id": "handover", "type": "transition", "start": 1200, "end": 1700, "kind": "push", "from": "card-1", "to": "card-2", "direction": "left", "ease": [0.65, 0, 0.35, 1]}
    ]}
  ]
}
  • Typ: push, wenn die beiden zu einem Streifen gehören (Seiten, Schritte, ein Karussell); slide, wenn das Neue auf einem stillen Alten landet; wipe, wenn das Alte an Ort und Stelle bleiben und weggeschnitten werden soll.
  • Richtung: die Art und Weise, wie die Bewegung sich fortbewegt. left bringt das Neue von rechts herein, was der Leserichtung folgt.
  • Länge: 400–600 ms, [0.65, 0, 0.35, 1]. Die start- und end-Werte des Übergangs sind genau die Zeit, die die beiden teilen.
  • Slide-Stapeln: In einem slide muss das eingehende Element auf der höheren layer sitzen.
  • Look: frame in der Mitte des Übergangs und überprüfen Sie, ob die Kante zwischen den beiden durchgehend ist. Vergrößern Sie dann auf frame-Ebene und überprüfen Sie, ob keine einzelnen Pixel durchscheinen.
  • Validierung: validate prüft auf pixelgenaue Übereinstimmung an der Nahtstelle.

Alles andere

  • Perspektivische Kartenwende (Card Flip): Animieren Sie die scale auf der x-Achse von [1, 1] auf [0, 1], tauschen Sie den Inhalt am Scheitelpunkt, dann animieren Sie auf [1, 1]. Das schafft einen 3D-Flip-Effekt.
  • Türenschwung: Animieren Sie rotation um die Kante der Tür (origin auf der Scharnierseite) von 0 auf -90 oder 90 Grad mit Perspektive, die durch eine transform-style: preserve-3d-ähnliche Einstellung erreicht wird (Montagent handhabt perspektivische Drehung nativ, wenn die Achse nicht zentriert ist).
  • Trailer-Effekte: Verwenden Sie für Slammed Titles, Glitch Cuts und HUDs das Trailer-Referenz für spezifische Rezepte mit Raster-Effekten, Zeitverzerrung und Overlay-Elementen.

Referenzen

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Verwandte Skills