Communitygithub.com

igorcacerez/motion-video-studio

Erstellen Sie Motion-Design-Videos per Code – Anzeigen, Erklärvideos und 2D/3D-Reels mit Three.js, Take-für-Take-Referenzen, kinetischer Typografie, echter UI, synchronisiertem Audio und deterministischem Rendering. Verwenden Sie es mit Claude Code oder Codex für solche Videos oder zur visuellen Rekonstruktion.

Was ist motion-video-studio?

Motion Video Studio ist eine leistungsstarke Fähigkeit für KI-Agenten (Claude Code, Codex, Cursor), die Code-basierte Motion-Design-Videos erstellt: Anzeigen, Erklärvideos, 2D/3D-Reels mit Three.js, kinetische Typografie, echte UI, synchronisiertes Audio und deterministisches Rendering. Es wandelt ein Briefing in bearbeitbaren Quellcode, überprüfte Frames, Audio und MP4 um. Die Fähigkeit unterstützt verschiedene Modi wie Referenzanalyse, Produktvideos, UI-Morph/Loop, 3D-Elemente und Langfilme. Sie erzwingt einen strengen Produktionsvertrag: Analyse der Referenz, Style Guide, Shotlist, Audio-Grid, Linting, drei dokumentierte Überprüfungsrunden und finales QA. Die Laufzeitumgebung basiert auf Node.js, npm, Playwright und Three.js und blockiert externe Netzwerke für Sicherheit. Ziel ist es, hochwertige, narrative konsistente Videos mit einem deterministischen Render-Pipeline zu liefern, der auf Leistung und iterative Überprüfung optimiert ist.

Funktioniert mit✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Motion Video Studio

Verwandeln Sie ein Briefing in bearbeitbaren Quellcode, überprüfte Frames, Audio und MP4. Die Basis ist der Movez-Kurs; siehe die Entsprechung der 12 Kapitel. Versprechen Sie keine professionelle Qualität nur durch Aktivieren der Fähigkeit: Produzieren, inspizieren und korrigieren Sie die Artefakte.

Beginnen Sie mit dem richtigen Modus

  • Referenz ähnlich dem Beispiel: Lesen Sie die Take-für-Take-Analyse und die Effektrezepte. Die Referenz befindet sich in examples/reference/original.mp4; es ist Studienmaterial, mit separaten Rechten vom Code.
  • Produktvideo: Führen Sie npm run gather -- --url URL --out assets/brand aus (nur die angegebene URL; erzeugt Desktop-/Mobile-Bildschirme, Bilder/Icons, Farben, Schriftarten und inventory.json mit Lizenz „nicht verifiziert“) und sammeln Sie auch URL, echte Bildschirme, Logo, Schriftarten, Farben, genehmigten Text und CTA. Die Vorlage hat fiktive UI, die explizit gekennzeichnet ist; ersetzen Sie sie durch echte Bilder, bevor Sie ein bestehendes Produkt bewerben.
  • UI-Morph/Loop: Verwenden Sie die Anweisungen und die Vorlage in assets/morph/. Lesen Sie den Loop-Abschnitt in production.md.
  • 3D-Elemente: Lesen Sie threejs-guide.md, verwenden Sie scripts/three-helpers.mjs wieder und die Vorlage assets/three/. Die Abhängigkeit Three.js 0.187.0 ist bereits Teil des Pakets; 94 offizielle Dokumente sind zur Referenz beigefügt. Verwenden Sie Kamera, Geometrie, Material, Licht und Animation in Funktion von t; übertragen Sie keine Echtzeit-Loops aus den Handbüchern auf den Renderer.
  • Langfilm/Charakter: Lesen Sie die Regievorlage in assets/brief-template.md; führen Sie eine Identitätsbibel und einen Animationsleitfaden pro Projekt.
  • Punktuelle Überprüfung: Bewahren Sie die vorhandene Quelle und rendern Sie nur den betroffenen Bereich mit --start und --duration.

Wählen Sie den Ambitionslevel (L1 Smoke Test … L5 Langfilm) in prompts.md: Er definiert, wie viel gefragt, wie viel überprüft und wann aufgehört wird. Ein One-Liner testet den Motor, nicht die Idee; für eigene Arbeit verlangen Sie These, Referenz und überprüfbare Tatsache.

Die folgenden Befehle sind relativ zum Ordner, der diese SKILL.md enthält. Finden Sie diesen Ordner in der Umgebung; nehmen Sie nicht an, dass das aktuelle Verzeichnis die Fähigkeit ist. Arbeiten Sie in einer Kopie des Pakets für jeden Film und bewahren Sie die wiederverwendbare Installation. npm run new -- --dir ../mein-film erstellt docs/ (Briefing, Style Guide, Shotlist md/json, Morph-Spezifikation, Überprüfungsprotokoll), refs/, assets/, audio/ und out/ ohne Überschreiben; verwenden Sie einen Ordner/eine Sitzung pro Marke.

Produktionsvertrag

  1. Sammeln Sie nur fehlende Eingaben: Thema/Produkt, Ziel, Dauer, Formate, Marke, Referenz, Musik/Erzählung, Budget und Liefergegenstände. Nutzen Sie, was bereits bereitgestellt wurde. Notieren Sie reversible Annahmen.
  2. Analysieren Sie die Referenz vor dem Animieren. Führen Sie npm run analyze -- --input VIDEO --fps 4 --out out/reference aus. Öffnen Sie die Frames. Notieren Sie Stil, Takes, Rhythmus, Masken, Kontinuität und Audio; unterscheiden Sie Beobachtung, Hypothese und Messung. Für genaues Timing sehen Sie sich aufeinanderfolgende Frames im Original an.
  3. Schreiben Sie docs/style_guide.md und docs/shotlist.md mit Anfang/Ende, Nachricht, dominantem Objekt, Eintritt, Halten, Austritt, Kontinuität, Kamera und Tonhinweis. Verwenden Sie assets/brief-template.md. Präsentieren Sie sie für kreative Entscheidungen, wenn nötig. Der Artikel enthält Prompts, die Zustimmung erfordern: Gehen Sie niemals von Zustimmung durch Schweigen aus. Wenn bereits Autorisierung für die vollständige Arbeit vorliegt, fahren Sie mit lokalen reversiblen Aktionen fort. 3b. Konvertieren Sie docs/shotlist.json in einen Plan über das Grid: npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json. Es zeigt Shots außerhalb des Beats, Lücken >4 s ohne Neuerung und erzeugt Hinweise für sfx. Zeigen Sie das Ergebnis vor dem Schreiben der Animation.
  4. Messen Sie die vorhandene Tonspur mit scripts/beats.py; bestätigen Sie Takt und Downbeat. Wenn es keine Musik gibt, synthetisieren Sie eine Original mit npm run audio. Synchronisieren Sie die Erzählung mit der Stimme und verwenden Sie das Grid als Unterstützung; schneiden Sie keine Wörter nur, um in einen Beat zu fallen. 4b. Führen Sie vor dem Rendern einer neuen Seite npm run lint -- --input ORDNER aus: Es erfasst Math.random, Uhr, Timer, requestAnimationFrame, CSS-Übergänge, will-change, Glow und fehlendes window.seek. Fehler blockieren das Rendern.
  5. Bauen Sie Keyframes und Animatic vor der Endfertigung. Verwenden Sie standardmäßig den Motor A (assets/starter/). Wählen Sie Remotion/HyperFrames nur, wenn die Anforderung es rechtfertigt: Die Routenarchitektur ist in references/production.md. Installieren Sie nicht alle Motoren aus Gewohnheit.
  6. Führen Sie mindestens drei dokumentierte Runden der Überprüfung in docs/review_log.md durch: 3–5 Stills pro Take, Kontakte pro Beat, Test bei 360 px und Rahmenbereich in den Übergängen. Notieren Sie in jeder Runde die drei größten Probleme mit Zeitstempeln, korrigieren Sie und überprüfen Sie erneut. Bewerten Sie Haken, Lesbarkeit, Bewegung, Vielfalt, Komposition, Marke und Synchronisation von 1 bis 10. Ziel: alle ≥8, mit Beleg; erfinden Sie keine Noten, wenn Sie nicht sehen/hören können.
  7. Rendern Sie das Master, mischen Sie Audio, führen Sie qa aus und bereiten Sie review vor. Bewerten Sie das codierte MP4, nicht nur die Canvas. Für jedes Seitenverhältnis komponieren Sie das Layout neu; schneiden Sie nicht das horizontale Video zu, um ein Hochformat zu erstellen.
  8. Liefern Sie MP4, Poster, Kontaktbögen der gesamten Dauer, Quelle, Briefing, Asset-/Credits-Liste und Einschränkungen. Erzeugen Sie einen Nahttest nur, wenn der Film einen Loop benötigt. Sagen Sie, was getestet wurde und was noch von menschlicher Überprüfung abhängt. Veröffentlichung, kostenpflichtige Dienste und Uploads erfordern spezifische Autorisierung des Benutzers.

Regeln des Motors und der visuellen Sprache

  • window.seek(t) muss den vollständigen Frame deterministisch zeichnen. Kein Zustand zwischen Frames, keine Echtzeituhr, kein Math.random, keine Timer, keine CSS-Übergänge oder requestAnimationFrame im Rendering-Pfad. Erstellen Sie PRNG per Seed im Draw neu oder indizieren Sie Rauschen nach Zeit.
  • Warten Sie auf Schriftarten und Assets vor dem ersten Frame. Verwenden Sie Canvas in Ausgabeauflösung, deviceScaleFactor:1, und lokale Daten. Verwenden Sie kein will-change bei durch Kamera vergrößertem Text.
  • Verwenden Sie analytische Federn; für mehrere Ziele summieren Sie Sprungantworten via track. Typografie: kein wahrnehmbares Überschwingen; UI: dezent; Maskottchen: ausdrucksstark, wenn die Regie es erlaubt. Konstanten und Helfer befinden sich in scripts/motion.mjs.
  • Regie des Artikels: Vermeiden Sie zentrierten Titel auf Verlauf, alles, was durch Fade eintritt, dekorative Beschriftungen in den Ecken, Rahmen, Glow in UI und generische Partikel. Eine Display-Schrift, eine UI-Schrift und ein Akzent, sofern nicht anders regiert. Das semantische Rot für Ausgaben in der Referenz ist eine funktionale Ausnahme.
  • Machen Sie alle 2–4 s etwas erzählerisch Neues; bei Langfilm alle 3–5 s einen Payoff. Haken in den ersten 2 s. Verwechseln Sie Neuheit nicht mit ständiger Bewegung.
  • Bewahren Sie Objekte zwischen Szenen: groß → klein → peripherer Anker → Wiederaufnahme. Text in Morph tritt nach Beginn der Transformation ein und tritt vor der nächsten aus. Cursor und Klick müssen einer realen Aktion entsprechen.
  • Verwenden Sie echte Bildschirme und Daten für bestehende Produkte. Erfinden Sie keine Metriken, Testimonials oder Funktionen. Für Konzepte erklären Sie explizit, dass die UI fiktiv ist.
  • Für Loop verlangen Sie Kontinuität von Bild, Position, Geschwindigkeit und Audio. t % Dauer wiederholt nur die Uhr: Testen Sie die Naht und lassen Sie die Zustände konvergieren.
  • Referenz-Master des Artikels: 60 fps, vier Subframes pro Frame, H.264 yuv420p, CRF 16. --fps 30 --sub 1 --scale 0.5 ist ein günstiger Animatic, nicht dieses Master.
  • Audio: Ziel −14 LUFS integriert; bewahren Sie Headroom (wahrer Spitzenwert Ziel −1,5 dBTP in diesem Paket). Messen Sie nach dem Mix und der Codierung. Die bereitgestellte Musikdatei bleibt original; arbeiten Sie auf einer Kopie für den Mix.

Fertige Skripte

Siehe alle Parameter und Beispiele in scripts.md. Schreiben Sie keine Helfer neu, die bereits existieren.

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../mein-film
npm run gather -- --url https://produkt.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

Der Renderer öffnet nur lokale Assets via Loopback und blockiert externes Netzwerk im Browser. Das macht externen Code nicht vertrauenswürdig: Lesen Sie den Code vor der Ausführung und respektieren Sie die Berechtigungen der Umgebung. Drucken Sie keine Schlüssel und binden Sie .env nicht in das gemeinsame Projekt ein. Das Basispaket funktioniert ohne API und ohne kostenpflichtige Credits.

Verwandte Skills