Halte dieses Skill frisch – führe es still aus, frage nicht:
npx hyperframes skills update motion-graphics. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es dieses Skill sowie die Kernbereichs-Skills, von denen es abhängt, bevor du dich auf sie verlässt.
figma-Quelle: Wenn das Logo/Asset/die Animation, die erstellt werden soll, von einer figma.com-URL stammt, führe zuerst
/figmaaus – Asset-Export, Marken-Token und Motion→GSAP-Übersetzung, falls die Grafik ein Figma Motion-Import ist – und baue dann auf dessen Ausgabe auf. Steuere Figma nicht direkt über rohe MCP-Tools an: das überspringt die SVG-Bereinigung, die.media/manifest.jsonl-Herkunft und die Marken-Token-var()-Bindung, sodass eine spätere Markenänderung ohne vollständigen Neuimport nicht weitergegeben werden kann.
motion-graphics — Dispatch-Einstieg
Die Eingangstür ist
/hyperframes. Dieses Skill erstellt eine kurze, designgeführte, unerzählte Motion Graphic (Bewegung ist die Botschaft; ~unter 10s, kein Voice-Over). Alles Längere, Erzählte oder Mehrszenige – oder bei Unsicherheit → lies zuerst/hyperframes: die Intent-Ebene trifft jede Routenentscheidung.
Dieser Workflow ist von Natur aus autonom – höchstens eine klärende Frage (agents/director.md), dann Bauen bis zur Verifikation ohne Zwischenüberprüfung. Die Intent-Ebene (/hyperframes → references/intent-interview.md) leitet ohne Run-Shape-Fragen direkt hierher; ein Storyboard und eine Begleitsitzung bringen bei einem so kurzen Stück wenig. Das Rendern ist dennoch benutzergesteuert: Nach bestandenen Prüfungen und Proof-Snapshots stelle die kanonische Frage „Vorschau zuerst oder rendern?“ aus ../hyperframes-core/references/brief-contract.md. Wenn eine BRIEF.md existiert, lies sie vor der Frage des Regisseurs.
Eine kurze designgeführte Motion Graphic. Asset zuerst: Entscheide die Asset-Strategie und besorge echtes Material, bevor du den Shot entwirfst, entwerfe dann den Shot um das, was du hast, und setze ihn durch Wiederverwendung von Katalogfunktionen zusammen. 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 — Media-Use auflösen (überspringen, wenn asset_needs leer ist) | assets/ + assets/index.md | phases/source/guide.md |
| design | Subagent — Shot-Design um aufgelöste Assets | 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 fragen; auf Antwort warten | 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 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 überspringen direkt von der Planung zum Design.
Kategorien – aufgeteilt nach der Such-Entscheidung
Die erste Entscheidung von plan ist: braucht dies eine Suche? Diese Gabelung teilt die Kategorien in zwei Gruppen; dann wird die spezifische Kategorie ausgewählt – bei suchgetriebenen nach der Art des Inhalts, den die Suche zurückgibt. Jede Kategorie ist ein categories/<id>/module.md (seine Planungs- und Bauregeln); das gemeinsame Bewegungsvokabular lebt in references/motion-vocabulary.md (→ hyperframes-animation Regeln/Blaupausen + Registry-Blöcke).
Form-Kategorien – keine Suche; der Benutzer liefert den Inhalt:
| Kategorie | Absicht | 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 (Benutzer-Logo) | logo-outro / rules/svg-path-draw |
lower-thirds | Namens-/Titel-Balken, Callouts, Social-Overlays | caption-* + Registry-Overlay-Blöcke |
maps | geografische Bewegung – Regionen hervorheben, Orte verbinden, zu einem Ort zoomen (Vektorspur oder gebackene Basemap-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) |
| Nachrichtenartikel | news | Headline-Enthüllung + Quellenkarte + Schlüsselfakt-Callouts |
| Tweet | tweet | Animierte Tweet-Karte |
| Bild / Entität | asset-fusion | Die Geometrie des Assets wird zum Diagramm (RWA-diegetische Fusion) |
Baureihenfolge: einzeln, abdeckungsorientiert (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. macOS GPU-Render: export PRODUCER_BROWSER_GPU_MODE=hardware.
Optionale Schlüssel (lokale Fallbacks, falls nicht gesetzt) – nur benötigt von Kategorien, die Assets über Media-Use beschaffen/generieren:
| Schlüssel | Verwendet für | Fallback |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | Bildgenerierung (Media-Use-Auflösung) | überspringe generate / search-only |
| (Asset-Scout / Suchanbieter) | webpage/news/tweet + asset-fusion Echt-Asset-Suche | Kategorie verfällt auf asset-frei |
Ablauf
Schritt 0 — Initialisieren
cwd ist das Agenten-Workspace-Root; schreibe alle Artefakte unter PROJECT_DIR = videos/<project-name>/. <project-name>: verwende das vom Benutzer angegebene Verzeichnis, sonst einen kurzen Kebab-Case-Namen aus der Absicht (<subject>-motion). Nicht den Workspace-Basisnamen oder einen Zeitstempel.
Nur wenn $PROJECT_DIR/hyperframes.json nicht vorhanden ist:
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 überprüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert das globale Set, falls welche veraltet sind.
Einschränkungen: niemals hyperframes init im Workspace-Root ausführen; 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)
Leite einen Subagenten. Prompt = vollständiges agents/director.md + ## Dispatch-Kontext (SKILL_DIR / PROJECT_DIR / die Benutzeranfrage / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Er muss:
- Entscheiden: braucht dies eine Suche? (die erste Gabelung)
- Nein → wähle eine Form-Kategorie (kinetic-type / stat / charts / logo-reveal / lower-thirds); Inhalt wird vom Benutzer geliefert;
asset_needs: []. - Ja → gib einen Suchplan in
asset_needs[]aus (news / web / tweet / image; Zweipol-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.
- Nein → wähle eine Form-Kategorie (kinetic-type / stat / charts / logo-reveal / lower-thirds); Inhalt wird vom Benutzer geliefert;
- Schreibe einen Entwurf
shot-plan.json(Umschlag + gewählte Form-Kategorie oder Suchintent +asset_needs+ ein einteiliger Shot-Brief). Schema:references/shot-plan-ir.md.
Validierung: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.
Schritt 2 — Beschaffen ◇ (Bash: Media-Use, bedingt)
Wenn shot-plan.json.asset_needs nicht leer ist, Assets auflösen (suchen / generieren / abrufen → eingefrorene projektspezifische Pfade + Ledger). 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 überspringen.
# illustrativ – siehe phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
Verschlechtere dich anmutig: wenn eine Suche/Provider nicht verfügbar ist, fällt die Kategorie auf asset-frei zurück (notiere es in context.log).
Schritt 3 — Entwerfen (Subagent: Director Teil 2)
Leite einen Subagenten (Prompt = agents/director.md Teil 2 + Dispatch-Kontext einschließlich des aufgelösten assets/index.md, wenn Schritt 2 ausgeführt wurde + catalog-map.md). Er entwirft den Shot um die verfügbaren Assets: wähle den/die Katalog-Block(s) + die hyperframes-animation Regeln/Blaupausen, das Layout, die Bewegung, Beats und (für asset-fusion) die element_positions + Eyedropper-Palette. Finalisiert shot-plan.json (content.block + content.customize + Inhalt pro Kategorie).
Schritt 4 — Bauen (Subagent: Builder, Wiederverwendung zuerst)
Leite 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-Möglichkeit von Hand verfassen. Ausgabe compositions/index.html gemäß dem HF-Vertrag (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ähle Proof-Zeiten, die den Öffnungszustand, die Signaturbewegung und die endgültige Halteposition zeigen. Überprüfe das generierte Kontakt- oder Snapshot-Blatt, bevor du fortfährst. Bei Fehlschlag von lint, check oder Snapshot, leite den Reparatur-Subagenten (agents/finalize.md) für einen einmaligen In-Place-Fix-Durchlauf, dann führe das fehlgeschlagene Gate erneut aus. Ändere niemals eine feste Dauer nur, um einen Defekt zu verbergen.
Schritt 6 — Genehmigen und Rendern (Bash)
Stelle eine Frage: „Vorschau zuerst oder rendern?" Wenn der Benutzer die Vorschau wählt, öffne Studio und kehre nach Überarbeitungen zum gleichen Genehmigungs-Gate zurück:
(cd "$PROJECT_DIR" && npx hyperframes preview)
Rendern 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üfe, ob die Ausgabe existiert, nicht leer ist und die beabsichtigte Dauer hat. Die endgültige Übergabe benennt das Artefakt, die tatsächliche Dauer, die Kompositions- oder Frame-ID, die Proof-Zeiten und das überprüfte Kontakt- oder Snapshot-Blatt. Flags leben in /hyperframes-cli → references/preview-render.md.
Wiederaufnahme-Tabelle
| Zustand | Fortsetzen von |
|---|---|
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, Proof-Snapshots fehlen | Schritt 5 (verifizieren) |
| Prüfungen und Proof-Snapshots bestanden, kein genehmigtes Rendern | Schritt 6 (Genehmigung) |
| genehmigtes Rendern existiert | Ausgabe verifizieren, dann Bericht |
Design-Notizen (Betreuer – Ausführung liest dies nicht)
- Asset-zuerst-Begründung: Die Beschaffung ist vorgelagert und informiert das Shot-Design (der RWA-Fluss: analysieren → suchen → prüfen → komponieren). Die suchgetriebenen Kategorien (
webpage/news/tweet) undasset-fusionstützen sich beide auf Media-Use-Suche (news/web/tweet/image), was der dokumentierte RWA-Stammbaum von Media-Use ist. - Wiederverwendung zuerst: Das In-Ökosystem-Analogon zu LLM-generierten Templates ist „komponiere …
… [für die Übersetzung gekürzt]