Communitygithub.com

Motion Proof

Erstelle 15-60 Sekunden Product-Launch-Videos und Motion Graphics mit Code in Remotion, inklusive Motion-Design-Regeln und automatischen Checks (Standbilder, Schwarzblenden, Lautstärke, Web-Qualität), damit das Ergebnis nicht nach KI aussieht. Verwende dies, wenn ein Launch-Video, eine Produkt- oder UI-Animation, Motion Graphics oder die Überprüfung eines bereits gerenderten Videos gewünscht wird.

Was ist Motion Proof?

Motion Proof ist ein KI-Agenten-Skill zum Erstellen professioneller animierter Videos mittels Code, basierend auf **Remotion** (React). Er vermeidet typische KI-typische Artefakte (z. B. lineare Bewegungen, fehlende Typografie) durch strenge Motion-Design-Regeln und automatisierte Qualitätsprüfungen. Der Skill führt den Agenten durch einen vollständigen Workflow: Briefing, visuelles Drehbuch, Animation mit vorgegebenen Bewegungsparametern (Federung, Drift, Kamerabewegungen), Rendering (H.264, 60fps, bt709) und mehrstufige manuelle sowie automatische Prüfungen (z. B. Standbildkontrolle, Lautstärke auf -14 LUFS, Bildqualität mit `libvmaf`). Der Agent muss vorab die Umgebung prüfen (Node 20+, FFmpeg mit libvmaf), das Remotion-Projekt anlegen und die zentralen Konfigurationsdateien (`movimiento.ts`) sowie Referenzdokumente aus dem Skill-Ordner einbinden. Das Ergebnis ist ein nach professionellen Maßstäben geprüftes, codiertes Video, das in verschiedenen Formaten (16:9, 9:16, 1:1) und optional als Web-Version ausgeliefert wird. Besonders hervorzuheben ist der deterministische Renderansatz (jeder Frame aus Frame-Nummer, keine zufälligen oder zeitbasierten Effekte) sowie die Messung (`medir.mjs`) und Sichtprüfung (`cuadros.mjs`), die explizit Fehler wie Standbilder oder fehlerhafte Farben detektiert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/germangalo97/motion-proof/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Motion Proof?

Du wirst animierte Videos mit Code erstellen: Jeder Frame stammt aus einem Programm (Remotion, das React verwendet). Was ein Video mit "KI-Gesicht" von einem professionellen unterscheidet, liegt fast immer an zwei Stellen: der Bewegung (Kurven, Rhythmus, Atempausen) und der Überprüfung (Frame für Frame anschauen und messen). Dieses Skill gibt dir beides.

Vorbereitung

  1. Prüfe die Werkzeuge: node --version (20 oder höher) und ffmpeg -version. Für die Web-Version wird ein ffmpeg mit libvmaf benötigt (ffmpeg -filters muss libvmaf auflisten).
  2. Falls kein Remotion-Projekt existiert, erstelle es mit npx create-video --yes --blank mein-video und füge die offiziellen Skills hinzu mit npx remotion skills add. Verwende diese Skills für Fragen zur Remotion-API.
  3. Füge in remotion.config.ts Config.setColorSpace("bt709"); hinzu. Ohne dies wird das Video im Full Range (yuvj420p) ausgegeben, was bei manchen Playern zu Farbverschiebungen führt.
  4. Kopiere template/motion.ts in das Projekt (z. B. nach src/lib/motion.ts) und schaue dir template/Example.tsx für das Muster an: gestaffelte Eingänge mit Federung, Drift, Kameraschub, Klick und Bewegungsunschärfe.
  5. Die Skripte in scripts/ werden mit node <ordner-dieses-skills>/scripts/<programm>.mjs ausgeführt. Sie installieren nichts.

Der Ablauf

  1. Briefing. Was ist das Produkt, für wen ist es, was soll der Betrachter am Ende tun, Formate (16:9, 9:16, 1:1) und Dauer. Wenn etwas Wichtiges fehlt, frage nach, bevor du fortfährst.
  2. Visuelles Drehbuch mit references/visuelles-drehbuch.md: Szenen mit exakten Start- und End-Frames, die in der Summe die Gesamtdauer ergeben. Animiere erst, wenn der Nutzer es genehmigt hat.
  3. Eine einzige Konfigurationsdatei mit Texten, Zahlen, Farben und Zeiten. Eine Textänderung muss eine einzelne Zeile sein, und die Zeiten werden von Bild und Ton von derselben Stelle gelesen.
  4. Animieren gemäß references/bewegung.md. Lies zuerst die Liste "Was KI verrät".
  5. Test-Frames (npx remotion still oder renderStill) an jedem Szenenwechsel und bei jeder Kamerabewegung. Betrachte sie vor dem vollständigen Render. Das Heranzoomen der Kamera auf einen Punkt drängt alles, was von diesem Punkt entfernt ist, nach außen: Jede Kamerabearbeitung wird in Einzelbildern überprüft.
  6. Render in H.264 (yuv420p, bt709) mit 60 Bildern pro Sekunde. Hochformat und Quadrat werden mit einem anderen Bühnenbild wiederhergestellt, nicht aus dem Querformat beschnitten.
  7. Ton mit references/ton.md: join.mjs zum Hinzufügen der Musik und volume.mjs zum Anpassen auf −14 LUFS.
  8. Messen mit measure.mjs. Wenn es fehlschlägt, wird das Video repariert. Der Messwert wird nur geändert, wenn der Fehler falsch ist und eine Messung dies belegt; in diesem Fall teile es bei der Ausgabe mit.
  9. Sichtprüfung mit frames.mjs (Frames-Blatt) und der Liste aus references/review.md.
  10. Web-Version mit web.mjs, falls eine leichte Datei benötigt wird.
  11. Liefern der mp4-Dateien, der Messung und dessen, was nicht überprüft werden konnte (z. B. wenn niemand den Ton gehört hat).

Feste Regeln

  • Jeder Frame stammt nur aus der Frame-Nummer, die durch die Bewegungsunschärfe Dezimalstellen haben kann. Kein useState, setTimeout, CSS-Übergänge oder Math.random() ohne festen Seed.
  • Die Typografie wird vor dem ersten Frame geladen. Ein Frame in Times New Roman ist ein Fehler.
  • Nichts bewegt sich in einer geraden Linie oder mit konstanter Geschwindigkeit, und nichts bleibt völlig still.
  • Ein wichtiger Text bleibt mindestens 1,5 s auf dem Bildschirm. Ein Zähler steigt in etwa 1 s an.
  • Nichts verlässt das Bild, es sei denn, es verlässt es absichtlich.
  • Was nicht überprüft wurde, wird mit diesen Worten mitgeteilt.

Befehle

node scripts/measure.mjs video.mp4 --width 1920 --height 1080 --fps 60 --duration 30 --report measurement.json
node scripts/frames.mjs video.mp4 sheet.png --count 12
node scripts/frames.mjs video.mp4 changes.png --seconds 4.5,9,15.2,22
node scripts/join.mjs mute-video.mp4 music.wav with-sound.mp4
node scripts/volume.mjs with-sound.mp4 final.mp4
node scripts/web.mjs final.mp4 web.mp4 --poster poster.jpg --second 28

measure.mjs wird mit Code 0 beendet, wenn es bestanden wird, und mit Code 1, wenn nicht, und listet jeden Fehler im Text auf. frames.mjs erstellt ein Bild, das du öffnen kannst, um mehrere Momente des Videos auf einmal zu überprüfen. Füge --mute zu measure.mjs hinzu für ein Video ohne Ton.

Verwandte Skills