Bewegungsgrafiken

Plugin-Installation: Führen Sie vor der Einrichtung oder Aktualisierung die Plugin-Ausführungsregeln aus, wenn sich diese Fähigkeit innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen befolgen Sie die untenstehenden Aktualisierungshinweise.

Halten Sie diese Fähigkeit zunächst aktuell – bestätigen Sie mit dem Benutzer vor der Ausführung: npx hyperframes skills update motion-graphics. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es diese Fähigkeit sowie die Kernbereichsfähigkeiten, von denen sie abhängt, bevor Sie sich darauf verlassen.

figma-Quelle: Wenn das Logo/Asset/Animation aus einer figma.com-URL stammt, führen Sie zuerst /figma aus – Asset-Export, Marken-Tokens und Motion→GSAP-Übersetzung, wenn es sich um einen Figma Motion-Import handelt – und bauen Sie dann auf dessen Ausgabe auf. Steuern Sie Figma nicht direkt über rohe MCP-Tools: Dies überspringt die SVG-Bereinigung, die .media/manifest.jsonl-Herkunftsnachverfolgung und die Marken-Token-var()-Bindung, sodass eine spätere Markenänderung ohne vollständigen Neuimport nicht propagiert werden kann.

motion-graphics – Dispatch-Einstieg

Der Haupteingang ist /hyperframes. Diese Fähigkeit erstellt eine kurze, designorientierte, unkommentierte Bewegungsgrafik (Bewegung ist die Botschaft; ~unter 10 s, kein Voice-Over). Alles, was länger, kommentiert oder mehrszenig ist – oder bei Unsicherheit → lesen Sie zuerst /hyperframes: Die Intentionsebene trifft jede Routenentscheidung.

Dieser Workflow ist von Natur aus autonom – höchstens eine klärende Frage (agents/director.md), dann Aufbau durch Verifikation ohne Zwischenkontrolle. Die Intentionsebene (/hyperframes → references/intent-interview.md) leitet direkt hierher weiter, ohne Fragen zur Ausführungsform; ein Storyboard und eine Begleitsitzung fügen einem so kurzen Stück wenig hinzu. Das Rendern ist dennoch benutzergesteuert: Nach bestandenen Prüfungen und Test-Snapshots stellen Sie die kanonische Frage „Vorschau oder rendern?“ aus ../hyperframes/references/brief-contract.md. Wenn eine BRIEF.md existiert, lesen Sie diese vor der Frage des Regisseurs.

Eine kurze, designorientierte Bewegungsgrafik. Asset-zuerst: Entscheiden Sie die Asset-Strategie und beschaffen Sie echtes Material, bevor Sie den Shot entwerfen, dann entwerfen Sie den Shot um das Vorhandene herum, dann komponieren Sie durch Wiederverwendung von Katalogfunktionen. Alle Artefakte gehen nach PROJECT_DIR = videos/<project-name>/ (erstellt in Schritt 0); alle Pfade unten sind relativ dazu.

Phase	Ausführung	Primäres Artefakt	Detaillierter Ablauf
init	Bash	hyperframes.json	Schritt 0
plan	Subagent – Suche entscheiden? + klassifizieren + Asset-Strategie	shot-plan.json (Entwurf: Kategorie, asset_needs-Abfragen, Brief)	agents/director.md (Teil 1)
source ◇	Bash – Medien-Nutzung auflösen (überspringen, wenn asset_needs leer)	assets/ + assets/index.md	phases/source/guide.md
design	Subagent – Shot-Design um aufgelöste Assets herum	shot-plan.json (endgültig: Block(s) + Layout + Bewegung + Positionen)	agents/director.md (Teil 2)
build	Subagent – Wiederverwendung-zuerst-Komposition	compositions/index.html	agents/builder.md
verify	Bash – lint, check, Test-Snapshots; Reparatur bei Fehlschlag	snapshots/contact-sheet.jpg	Schritt 5
approve	Frage nach Vorschau oder Rendern; warte auf Antwort	Explizite Render-Genehmigung	Schritt 6
render	Bash – hyperframes render (MP4, oder --format webm/mov für Overlay)	renders/video.mp4 oder transparentes Overlay	Schritt 6

◇ source wird nur ausgeführt, wenn die gewählte Kategorie Assets deklariert. Reine Code/Text-Kategorien (z. B. kinetic-type, die meisten charts/stat) haben asset_needs: [] und springen direkt von der Planung zum Design.

Kategorien – Aufteilung nach der Such-Entscheidung

Die erste Entscheidung von plan ist: Ist eine Suche erforderlich? Diese Gabelung teilt die Kategorien in zwei Gruppen; dann wird die spezifische Kategorie ausgewählt – bei suchgesteuerten Kategorien nach dem Inhaltstyp, den die Suche zurückgibt. Jede Kategorie ist ein categories/<id>/module.md (ihre Planungs- und Bauregeln); das gemeinsame Bewegungsvokabular lebt in references/motion-vocabulary.md (→ hyperframes-animation-Regeln/Blueprint und Registry-Blöcke).

Formkategorien – keine Suche; der Benutzer liefert den Inhalt:

Kategorie	Zweck	Stützt sich auf
kinetic-type	prägnante Zeile / Zitat / Titel, bewegungsorientierter Text	caption-*-Blöcke + Animationsregeln
stat	einzelne Held/Anzahl / Count-up + Ring	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	Balken / Linie / Kreis / Rennen / % aus Daten	data-chart-Block
logo-reveal	Logo-Sting / Marken-Lockup (Benutzer-Logo)	logo-outro / rules/svg-path-draw
lower-thirds	Namens-/Titelbalken, Callouts, Social-Overlays	caption-* + Registry-Overlay-Blöcke
maps	geografische Bewegung – Regionen hervorheben, Orte verbinden, zu einem Ort zoomen (Vektor-Spur oder gebackene Basiskarten-Spur)	us-map / world-map-Familie + bake-basemap.mjs

Suchgesteuerte Kategorien – zuerst suchen, dann nach Inhaltstyp animieren (der RWA-Pfad):

Zurückgegebener Inhalt	Kategorie	Animation
Webseite / Link	webpage	Webseiten-/UI-Animation (Scrollen, Enthüllen, Cursor, Callouts)
Nachrichtenartikel	news	Headline-Enthüllung + Quellenkarte + Key-Fact-Callouts
Tweet	tweet	Animierte Tweet-Karte
Bild / Entität	asset-fusion	Die Geometrie des Assets wird zum Diagramm (RWA diegetische Fusion)

Baureihenfolge: eins nach dem anderen, Abdeckung zuerst (grob ist in Ordnung). kinetic-type aus dem Prototypen portiert; der Rest folgt.

Voraussetzungen

macOS Apple Silicon oder Linux x64. System-Tools: brew install node ffmpeg. npx hyperframes doctor einmalig. macOS GPU-Rendering: export PRODUCER_BROWSER_GPU_MODE=hardware.

Optionale Schlüssel (lokale Fallbacks, wenn nicht gesetzt) – nur benötigt von Kategorien, die Assets über Medien-Nutzung beschaffen/generieren:

Schlüssel	Verwendung für	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	Bildgenerierung (Medien-Nutzung auflösen)	Generierung überspringen / Nur-Suche
(asset_scout / Suchanbieter)	webpage/news/tweet + asset-fusion Echt-Asset-Suche	Kategorie degradiert zu asset-frei

Ablauf

Schritt 0 – Initialisieren

Das aktuelle Arbeitsverzeichnis (cwd) ist das Stammverzeichnis des Agenten-Workspace; schreiben Sie alle Artefakte unter PROJECT_DIR = videos/<project-name>/. <project-name>: Verwenden Sie das vom Benutzer angegebene Verzeichnis, sonst einen kurzen Kebab-Case-Namen aus der Intention (<subject>-motion). Nicht den Basisnamen des Workspace oder einen Zeitstempel.

Nur wenn $PROJECT_DIR/hyperframes.json fehlt:

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics

init prüft die installierten Fähigkeiten gegen die neuesten auf GitHub und aktualisiert den globalen Satz, falls welche veraltet sind.

Einschränkungen: Führen Sie niemals hyperframes init im Workspace-Stammverzeichnis aus; verschachteln Sie niemals ein weiteres hyperframes/ in PROJECT_DIR; jeder Bash-Befehl (Master + Subagenten) ist eine (cd "$PROJECT_DIR" && ...)-Subshell – niemals ein bloßes cd.

Schritt 1 – Planen (Subagent: Director Teil 1)

Starten Sie einen Subagenten. Prompt = vollständiges agents/director.md + ## Dispatch-Kontext (SKILL_DIR / PROJECT_DIR / die Anfrage des Benutzers / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Er muss:

1. Entscheiden: Benötigt dies eine Suche? (die erste Gabelung)
   • Nein → wählen Sie eine Formkategorie (kinetic-type / stat / charts / logo-reveal / lower-thirds); Inhalt wird vom Benutzer bereitgestellt; asset_needs: [].
   • Ja → geben Sie einen Suchplan in asset_needs[] aus (news / web / tweet / image; zweipolige Abfragen). Die spezifische suchgesteuerte Kategorie (webpage / news / tweet / asset-fusion) wird durch den in Schritt 2 zurückgegebenen Inhaltstyp bestätigt und in Schritt 3 finalisiert.
2. Schreiben Sie einen Entwurf von shot-plan.json (Umschlag + gewählte Formkategorie oder Suchabsicht + asset_needs + ein einleitender Absatz für den Shot-Brief). Schema: references/shot-plan-ir.md.

Validierung: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.

Schritt 2 – Beschaffen ◇ (Bash: Medien-Nutzung, bedingt)

Wenn shot-plan.json.asset_needs nicht leer ist, lösen Sie Assets auf (Suche / Generierung / Abruf → eingefrorene projektspezifische Pfade + Ledger). Siehe phases/source/guide.md (umschließt media-use resolve; die suchgesteuerten Kategorien verwenden die Nachrichten-/Web-/Tweet-/Bildersuche). Wenn asset_needs leer ist, springen Sie zu Schritt 3.

# illustrativ – siehe phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)

Anmutig degradieren: Wenn ein Such-/Anbieter nicht verfügbar ist, fällt die Kategorie auf asset-frei zurück (notieren Sie dies in context.log).

Schritt 3 – Entwerfen (Subagent: Director Teil 2)

Starten Sie einen Subagenten (Prompt = agents/director.md Teil 2 + Dispatch-Kontext einschließlich der aufgelösten assets/index.md, falls Schritt 2 ausgeführt wurde + catalog-map.md). Er entwirft den Shot um die verfügbaren Assets herum: wählen Sie den/die Katalogblock/-blöcke + die hyperframes-animation-Regeln/Blueprints, das Layout, die Bewegung, Beats und (für asset-fusion) die element_positions + Pipetten-Palette. Finalisiert shot-plan.json (content.block + content.customize + kategoriespezifischer Inhalt).

Schritt 4 – Bauen (Subagent: Builder, Wiederverwendung-zuerst)

Starten Sie einen Subagenten. Prompt = vollständiges agents/builder.md + Dispatch-Kontext (shot-plan.json, catalog-map.md, das module.md der Kategorie, references/motion-vocabulary.md, references/builder-contract.md). Wiederverwendung-zuerst: npx hyperframes add <block> + an Ort und Stelle anpassen; nur Lücken + die Asset-Fusion-Ermöglichung von Hand erstellen. Ausgabe compositions/index.html unter Einhaltung des HF-Vertrags (pausierte GSAP-Timeline auf window.__timelines, class="clip" + stabile IDs, tl.seek(0), deterministisch).

Schritt 5 – Verifizieren (Bash → Reparatur-Subagent bei Fehlschlag)

(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)

Wählen Sie Test-Zeitpunkte, die den Eröffnungszustand, die charakteristische Bewegung und das finale Halten zeigen. Überprüfen Sie das generierte Kontakt- oder Snapshot-Blatt, bevor Sie fortfahren. Bei Fehlschlag von lint, check oder Snapshot starten Sie den Reparatur-Subagenten (agents/finalize.md) für einen einmaligen Korrektur-Durchlauf an Ort und Stelle und führen Sie dann die fehlgeschlagene Prüfung erneut aus. Ändern Sie niemals eine festgelegte Dauer nur, um einen Fehler zu verbergen.

Schritt 6 – Genehmigen und Rendern (Bash)

Stellen Sie eine Frage: „Vorschau oder rendern?“ Wenn der Benutzer die Vorschau wählt, öffnen Sie Studio und kehren Sie nach Überarbeitungen zum selben Genehmigungs-Gate zurück:

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

Rendern Sie erst nach einer expliziten Render-Antwort:

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# transparente Overlay-Variante: --format webm  (or mov)

Überprüfen Sie, ob die Ausgabe existiert, nicht leer ist und die beabsichtigte Dauer hat. Die finale Übergabe benennt das Artefakt, die tatsächliche Dauer, die Kompositions- oder Frame-ID, die Test-Zeitpunkte und das überprüfte Kontakt- oder Snapshot-Blatt. Flags leben in /hyperframes-cli → references/preview-render.md.

Fortsetzungstabelle

Zustand	Fortsetzen ab
kein shot-plan.json	Schritt 1 (Planen)
shot-plan.json hat asset_needs, kein assets/	Schritt 2 (Beschaffen)
shot-plan.json endgültig, kein compositions/index.html	Schritt 3/4 (Entwerfen+Bauen)
compositions/index.html existiert, Test-Snapshots fehlen	Schritt 5 (Verifizieren)
Prüfungen und Test-Snapshots bestanden, kein genehmigtes Rendern	Schritt 6 (Genehmigung)
Genehmigtes Rendern existiert	Ausgabe verifizieren, dann melden

Design-Notizen (Maintainer – die Ausführung liest dies nicht)

• Asset-zuerst-Begründung: Die Beschaffung wird vorgelagert und informiert das Shot-Design (der RWA-Ablauf: analysieren → suchen → prüfen → c ...

…[gekürzt zur Übersetzung]