berhjoan/motion-graphics

Plugin-Installationen: Vor dem Setup oder Aktualisierungsbefehlen folgen Sie den Plugin-Ausführungsregeln, wenn sich dieses Skill in einem HyperFrames-Plugin befindet. Eigenständige Installationen behalten die folgenden Update-Anweisungen bei.

Erstens: Halten Sie dieses Skill auf dem neuesten Stand – bestätigen Sie mit dem Benutzer vor der Ausführung: npx hyperframes skills update motion-graphics. Eine schnelle No-Op, wenn alles aktuell ist; andernfalls wird dieses Skill zusammen mit den Kern-Domain-Skills, von denen es abhängt, aktualisiert, bevor Sie sich auf sie verlassen.

Figma-Quelle: Wenn das Logo/Asset/Animation, von dem erstellt werden soll, von einer figma.com-URL stammt, führen Sie zuerst /figma aus – Asset-Export, Brand-Tokens und Motion→GSAP-Übersetzung, falls die Grafik ein Figma Motion-Import ist – und bauen Sie dann aus dessen Ausgabe. Betreiben Sie Figma nicht direkt über rohe MCP-Tools: Das überspringt die SVG-Bereinigung, die .media/manifest.jsonl-Herkunft und die Brand-Token var()-Bindung, sodass eine spätere Markenänderung ohne vollständigen Re-Import nicht fortgepflanzt werden kann.

motion-graphics – Dispatch-Einstieg

Die Eingangstür ist /hyperframes. Dieses Skill erstellt einen kurzen, designorientierten, unkommentierten Bewegtgrafiker (Bewegung ist die Botschaft; ~unter 10s, ohne Voice-Over). Alles, was länger ist, kommentiert oder mehrere Szenen hat – oder bei Unsicherheit → lesen Sie zuerst /hyperframes: die Intentionsebene besitzt jede Routenentscheidung.

Dieser Workflow ist von Natur aus autonom – maximal eine klärende Frage (agents/director.md), dann Build durch Verifikation ohne Zwischenprüfung. Die Intentionsebene (/hyperframes → references/intent-interview.md) leitet direkt hierher ohne Run-Shape-Fragen; ein Storyboard und eine Begleitsitzung fügen einem so kurzen Stück wenig hinzu. Das Rendering ist dennoch benutzergesteuert: Nachdem Prüfungen und Proof-Snapshots bestanden sind, öffnen Sie die Studio-Vorschau und stellen Sie die kanonische Frage „jetzt rendern oder was ändern?“ aus ../hyperframes/references/brief-contract.md. Wenn eine BRIEF.md existiert, lesen Sie sie vor der Frage des Directors.

Ein kurzer, designorientierter Bewegtgrafiker. Asset-zuerst: Entscheiden Sie die Asset-Strategie und besorgen Sie echtes Material, bevor Sie den Shot gestalten, dann gestalten Sie den Shot um das Vorhandene herum, dann komponieren Sie durch Wiederverwendung von Katalog-Fähigkeiten. Alle Artefakte gehen nach PROJECT_DIR = videos/<projekt-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 — Mediennutzung 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 (final: Block(s) + Layout + Motion + Positionen)	agents/director.md (Teil 2)
build	Subagent — Wiederverwendungs-erste Komposition	compositions/index.html	agents/builder.md
verify	Bash — lint, check, Proof-Snapshots; Reparatur bei Fehlschlag	snapshots/contact-sheet.jpg	Schritt 5
approve	Vorschau öffnen; nach Rendern oder Änderungen fragen; auf Antwort warten	Explizite Render-Freigabe	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 von der Planung zum Design.

Kategorien – aufgeteilt nach der Such-Entscheidung

plans erste Entscheidung ist: braucht dies eine Suche? Diese Gabelung teilt die Kategorien in zwei Gruppen; dann wird die spezifische Kategorie ausgewählt – für suchgetrieben nach der Art des Inhalts, den die Suche zurückgibt. Jede Kategorie ist ein categories/<id>/module.md (ihre Planungs- + Build-Regeln); das gemeinsame Bewegungsvokabular lebt in references/motion-vocabulary.md (→ hyperframes-animation-Regeln/Blueprint + Registry-Blöcke).

Form-Kategorien – keine Suche; der Benutzer liefert den Inhalt:

Kategorie	Absicht	Stützt sich auf
kinetic-type	Knackiger Satz / Zitat / Titel, bewegungs-erster 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 / Torte / Rennen / % aus Daten	data-chart-Block
logo-reveal	Logo-Sting / Brand-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 eingebackene Basiskarten-Spur)	us-map / world-map-Familie + bake-basemap.mjs

Suchgetriebene 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)
News-Artikel	news	Schlagzeilen-Enthüllung + Quellenkarte + Schlüsselfakten-Callouts
Tweet	tweet	Animierte Tweet-Karte
Bild / Entität	asset-fusion	Die Geometrie des Assets wird zum Diagramm (RWA diegetische Fusion)

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

Voraussetzungen

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

Optionale Schlüssel (lokale Fallbacks, falls nicht gesetzt) – nur benötigt von Kategorien, die Assets über Mediennutzung beziehen/generieren:

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

Ablauf

Schritt 0 – Initialisieren

cwd ist das Agenten-Workspace-Root; schreiben Sie alle Artefakte unter PROJECT_DIR = videos/<projekt-name>/. <projekt-name>: verwenden Sie das vom Benutzer angegebene Verzeichnis, sonst einen kurzen Kebab-Case-Namen aus der Absicht (<betreff>-motion). Nicht den Workspace-Basisnamen oder einen Zeitstempel.

Nur wenn $PROJECT_DIR/hyperframes.json fehlt:

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<projekt-name>}"
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 die globale Menge, wenn welche veraltet sind.

Einschränkungen: niemals hyperframes init im Workspace-Root; niemals ein weiteres hyperframes/ innerhalb von PROJECT_DIR verschachteln; jeder Bash-Befehl (Master + Subagenten) ist eine (cd "$PROJECT_DIR" && ...)-Subshell – niemals nacktes cd.

Schritt 1 – Planen (Subagent: Director Teil 1)

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

1. Entscheiden: braucht dies eine Suche? (die erste Gabelung)
   • Nein → eine Form-Kategorie auswählen (kinetic-type / stat / charts / logo-reveal / lower-thirds / maps); Inhalt vom Benutzer geliefert; asset_needs: [].
   • Ja → einen Suchplan in asset_needs[] ausgeben (news / web / tweet / image; zweipolige Abfragen). Die spezifische suchgetriebene Kategorie (webpage / news / tweet / asset-fusion) wird durch den in Schritt 2 zurückgegebenen Inhaltstyp bestätigt und in Schritt 3 finalisiert.
2. Einen Entwurf shot-plan.json schreiben (Umschlag + gewählte Form-Kategorie oder Suchabsicht + asset_needs + ein einabsätziger Shot-Brief). Schema: references/shot-plan-ir.md.

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

Schritt 2 – Besorgen ◇ (Bash: Mediennutzung, bedingt)

Wenn shot-plan.json.asset_needs nicht leer ist, Assets auflösen (suchen / generieren / holen → eingefrorene projektspezifische Pfade + Hauptbuch). Siehe phases/source/guide.md (umhüllt media-use resolve; die suchgetriebenen Kategorien verwenden die news/web/tweet/image-Suche). Wenn asset_needs leer ist, zu Schritt 3 springen.

Gracefully degradieren: wenn ein Suchanbieter nicht verfügbar ist, fällt die Kategorie auf asset-frei zurück (im context.log notieren).

Schritt 3 – Gestalten (Subagent: Director Teil 2)

Einen Subagenten entsenden (Prompt = agents/director.md Teil 2 + Dispatch-Kontext inklusive des aufgelösten assets/index.md, falls Schritt 2 lief + catalog-map.md). Es gestaltet den Shot um die verfügbaren Assets herum: den/die Katalog-Block(s) + die hyperframes-animation-Regeln/Blueprints, das Layout, die Bewegung, Beats und (für asset-fusion) die element_positions + die Eyedropper-Palette. Finalisiert shot-plan.json (content.block + content.customize + pro-Kategorie-Inhalt).

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

Fügen Sie die gemeinsamen Bewegungsprinzipien in den Dispatch-Kontext des Builders ein. Für charts und stat auch Daten in Bewegung. Der Builder liest diese Anleitungen, bevor er die Timeline schreibt.

Einen Subagenten entsenden. 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-Ausstattung von Hand schreiben. Ausgabe compositions/index.html unter Beachtung des HF-Vertrags (pausierte GSAP-Timeline auf window.__timelines, class="clip" + stabile IDs, tl.seek(0), deterministisch).

Schritt 5 – Überprüfen (Bash → Reparatur-Subagent bei Fehlschlag)

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

Wählen Sie Proof-Zeitpunkte, die den Eröffnungszustand, die signifikante Bewegung und die finale Halteposition zeigen. Überprüfen Sie das generierte Kontakt- oder Snapshot-Blatt, bevor Sie fortfahren. Bei lint-, check- oder Snapshot-Fehlschlag den Reparatur-Subagenten (agents/finalize.md) für einen direkten Korrekturdurchlauf entsenden, dann das fehlgeschlagene Gate erneut ausführen. Ändern Sie niemals eine festgelegte Dauer nur, um einen Fehler zu verbergen.

Schritt 6 – Genehmigen und rendern (Bash)

Studio öffnen, dann eine Frage stellen: „jetzt rendern oder was ändern?“. Nach Überarbeitungen zum selben Gate zurückkehren:

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

Nur nach einer expliziten Render-Antwort rendern:

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

Überprüfen, 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 Proof-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 (plan)
shot-plan.json hat asset_needs, kein assets/	Schritt 2 (source)
shot-plan.json final, kein compositions/index.html	Schritt 3/4 (design+build)
compositions/index.html existiert, Proof-Snapshots fehlen	Schritt 5 (verify)
Prüfungen und Proof-Snapshots bestanden, keine genehmigte Render	Schritt 6 (approval)
genehmigte Render existiert	Ausgabe überprüfen, dann berichten

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

• Asset-zuerst-Rationierung: Das Skill priorisiert die Beschaffung und Gestaltung um echte Assets; dies stellt sicher, dass die Animation im Kontext des verfügbaren Materials erfolgt, nicht im luftleeren Raum.
• Wiederverwendungsorientiert: Katalog-Blöcke und Registry-Einträge werden wann immer möglich wiederverwendet; individuelle Anpassungen erfolgen durch Überschreibungen, nicht durch Neuschreiben.
• Autonome Ausführung: Der Workflow minimiert Unterbrechungen, erfordert aber eine explizite Genehmigung vor dem Rendern, was die Qualität und die Übereinstimmung mit den Benutzererwartungen sicherstellt.