Plugin-Installation: Befolgen Sie vor den Einrichtungs- oder Aktualisierungsbefehlen die Plugin-Ausführungsregeln, wenn sich dieser Skill in einem HyperFrames-Plugin befindet. Bei eigenständigen Installationen gelten die untenstehenden Aktualisierungshinweise.
Zuerst: Halten Sie diesen Skill aktuell – bestätigen Sie mit dem Benutzer, bevor Sie dies ausführen:
npx hyperframes skills update motion-graphics. Ein schneller No-Op, wenn alles aktuell ist; andernfalls wird dieser Skill zusammen mit den Kern-Domain-Skills, von denen er abhängt, aktualisiert, bevor Sie sich auf sie verlassen.
Figma-Quelle: Wenn das Logo/Asset/die Animation, die erstellt werden soll, von einer figma.com-URL stammt, führen Sie zuerst
/figmaaus – Asset-Export, Brand-Tokens und Motion→GSAP-Übersetzung, falls es sich um einen Figma Motion-Import handelt – und bauen Sie dann auf dessen Ausgabe auf. Verwenden Sie Figma nicht direkt über rohe MCP-Tools: Dies umgeht die SVG-Bereinigung,.media/manifest.jsonl-Herkunftsnachweise und die Brand-Token-var()-Bindung, sodass eine spätere Markenänderung nicht ohne einen vollständigen Neuimport propagiert werden kann.
motion-graphics — Dispatch-Einstiegspunkt
Die Eingangstür ist
/hyperframes. Dieser Skill erstellt eine kurze, designgeführte, unkommentierte Bewegtgrafik (Bewegung ist die Botschaft; ~unter 10s, kein Voice-Over). Alles, was länger ist, kommentiert wird oder mehrere Szenen umfasst – oder bei Unsicherheit → zuerst/hyperframeslesen: Die Intentionsebene besitzt jede Routenentscheidung.
Dieser Workflow ist von Natur aus autonom – maximal eine klärende Frage (agents/director.md), dann Bau durch Verifikation ohne Zwischenüberprüfung. Die Intentionsebene (/hyperframes → references/intent-interview.md) leitet direkt hierher weiter, ohne Fragen zum Ablauf; ein Storyboard und eine Begleitsitzung fügen einem so kurzen Stück wenig hinzu. Das Rendern erfolgt dennoch benutzergesteuert: Nach bestandenen Prüfungen und Proof-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 Directors.
Eine kurze, designgeführte Bewegtgrafik. Asset-zuerst: Entscheiden Sie die Asset-Strategie und besorgen Sie echtes Material, bevor Sie den Shot entwerfen, dann entwerfen Sie den Shot um das Vorhandene herum, dann komponieren Sie durch Wiederverwendung von Katalogfähigkeiten. Alle Artefakte gehen nach PROJECT_DIR = videos/<projektname>/ (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-Anfragen, Brief) | agents/director.md (Teil 1) |
| source ◇ | Bash – Medienverwendung auflösen (überspringen, wenn asset_needs leer ist) | 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 – wiederverwendungsorientierte Komposition | compositions/index.html | agents/builder.md |
| verify | Bash – lint, check, Proof-Snapshots; Reparatur bei Fehlschlag | snapshots/contact-sheet.jpg | Schritt 5 |
| approve | Vorschau oder Rendern anfragen; auf Antwort warten | explizite Rendering-Zustimmung | Schritt 6 |
| render | Bash – hyperframes render (MP4, oder --format webm/mov für Overlay) | renders/video.mp4 oder transparentes Overlay | Schritt 6 |
◇ source läuft nur, 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 vom Plan zum Design.
Kategorien – aufgeteilt nach der Suchentscheidung
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 nach der Art des Inhalts, den die Suche zurückgibt. Jede Kategorie ist ein categories/<id>/module.md (ihre Planungs- + Bauregeln); das gemeinsame Bewegungsvokabular lebt in references/motion-vocabulary.md (→ hyperframes-animation Regeln/Blaupausen + 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 Heldenzahl / 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 / Brand Lockup (Benutzerlogo) | 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, Aufdecken, Cursor, Callouts) |
| Nachrichtenartikel | news | Headline-Aufdeckung + Quellenkarte + Callouts zu Schlüsselfakten |
| Tweet | tweet | animierte Tweet-Karte |
| Bild / Entität | asset-fusion | Die Geometrie des Assets wird zum Diagramm (RWA diegetische Fusion) |
Baureihenfolge: einzeln, Abdeckung zuerst (grob ist in Ordnung). kinetic-type aus dem Prototyp portiert; der Rest folgt.
Voraussetzungen
macOS Apple Silicon oder Linux x64. Systemtools: brew install node ffmpeg. npx hyperframes doctor einmal ausführen. macOS GPU-Render: export PRODUCER_BROWSER_GPU_MODE=hardware.
Optionale Schlüssel (lokale Fallbacks, wenn nicht gesetzt) – nur benötigt von Kategorien, die Assets über Medienverwendung generieren/beschaffen:
| Schlüssel | Verwendet für | Fallback |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | Bildgenerierung (Medienverwendung auflösen) | Generierung überspringen / nur-Suche |
| (Asset-Scout / Suchanbieter) | webpage/news/tweet + asset-fusion echte Asset-Suche | Kategorie degradiert zu asset-frei |
Ablauf
Schritt 0 – Initialisieren
CWD ist das Stammverzeichnis des Agenten-Workspace; schreiben Sie alle Artefakte unter PROJECT_DIR = videos/<projektname>/. <projektname>: Verwenden Sie das vom Benutzer angegebene Verzeichnis, andernfalls einen kurzen Kebab-Case-Namen aus der Absicht (<subjekt>-motion). Nicht den Workspace-Basename oder einen Zeitstempel.
Nur wenn $PROJECT_DIR/hyperframes.json nicht vorhanden ist:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<projektname>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init überprüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert den globalen Satz, wenn welche veraltet sind.
Einschränkungen: Führen Sie niemals hyperframes init im Workspace-Stammverzeichnis aus; verschachteln Sie kein weiteres hyperframes/ innerhalb von 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:
- Entscheiden: Ist eine Suche erforderlich? (die erste Gabelung)
- Nein → wählen Sie eine Formkategorie (kinetic-type / stat / charts / logo-reveal / lower-thirds); Inhalt wird vom Benutzer geliefert;
asset_needs: []. - Ja → geben Sie einen Suchplan in
asset_needs[]aus (Nachrichten / Web / Tweet / Bild; 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.
- Nein → wählen Sie eine Formkategorie (kinetic-type / stat / charts / logo-reveal / lower-thirds); Inhalt wird vom Benutzer geliefert;
- Schreiben Sie einen Entwurf
shot-plan.json(Umschlag + gewählte Formkategorie oder Suchabsicht +asset_needs+ ein einleitender Shot-Brief). Schema:references/shot-plan-ir.md.
Validierung: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo nicht gefunden.
Schritt 2 – Beschaffen ◇ (Bash: Medienverwendung, bedingt)
Wenn shot-plan.json.asset_needs nicht leer ist, Assets auflösen (Suchen / Generieren / Abrufen → eingefrorene projektlokale Pfade + Hauptbuch). Siehe phases/source/guide.md (umfasst media-use resolve; die suchgesteuerten Kategorien verwenden die Nachrichten-/Web-/Tweet-/Bildsuche). Wenn asset_needs leer ist, zu Schritt 3 springen.
# 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 eine Suche/ein Anbieter nicht verfügbar ist, fällt die Kategorie auf asset-frei zurück (in context.log notieren).
Schritt 3 – Designen (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 das/die Katalog-Block(e) + die hyperframes-animation Regeln/Blaupausen, das Layout, die Bewegung, Beats und (für asset-fusion) die element_positions + Pipetten-Palette. Finalisiert shot-plan.json (content.block + content.customize + inhaltspezifisch pro Kategorie).
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> + direkt anpassen; nur Lücken + die Asset-Fusion-Funktion von Hand erstellen. Ausgabe compositions/index.html, das den HF-Vertrag einhält (pausierte GSAP-Timeline auf window.__timelines, class="clip" + stabile IDs, tl.seek(0), deterministisch).
Schritt 5 – Überprüfen (Bash → Reparatursubagent bei Fehlschlag)
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <prüfzeitpunkte>)
Wählen Sie Prüfzeitpunkte, die den Eröffnungszustand, die charakteristische Bewegung und die Endposition zeigen. Überprüfen Sie das generierte Kontakt- oder Snapshot-Blatt, bevor Sie fortfahren. Bei Fehlschlag von lint, check oder Snapshot starten Sie den Reparatursubagenten (agents/finalize.md) für einen einzigen Korrekturdurchlauf an Ort und Stelle, 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 zuerst oder rendern?“ Wenn der Benutzer die Vorschau wählt, öffnen Sie Studio und kehren Sie nach Überarbeitungen an dieselbe Genehmigungspforte zurück:
(cd "$PROJECT_DIR" && npx hyperframes preview --background)
Rendern Sie nur 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 (oder mov)
Überprüfen Sie, ob die Ausgabe vorhanden, nicht leer und von der beabsichtigten Dauer ist. Die endgültige Übergabe benennt das Artefakt, die tatsächliche Dauer, die Komposition oder Frame-ID, die Prüfzeitpunkte und das überprüfte Kontakt- oder Snapshot-Blatt. Flags befinden sich in /hyperframes-cli → references/preview-render.md.
Fortsetzungstabelle
| Zustand | Fortfahren ab |
|---|---|
kein shot-plan.json | Schritt 1 (planen) |
shot-plan.json hat asset_needs, kein assets/ | Schritt 2 (beschaffen) |
shot-plan.json final, kein compositions/index.html | Schritt 3/4 (design+bauen) |
compositions/index.html existiert, Proof-Snapshots fehlen | Schritt 5 (überprüfen) |
| Prüfungen und Proof-Snapshots bestanden, kein genehmigtes Rendering | Schritt 6 (Genehmigung) |
| Genehmigtes Rendering existiert | Ausgabe prüfen, dann berichten |
Designhinweise (Betreuer – 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
… [für die Übersetzung gekürzt]