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
- Prüfe die Werkzeuge:
node --version(20 oder höher) undffmpeg -version. Für die Web-Version wird ein ffmpeg mit libvmaf benötigt (ffmpeg -filtersmusslibvmafauflisten). - Falls kein Remotion-Projekt existiert, erstelle es mit
npx create-video --yes --blank mein-videound füge die offiziellen Skills hinzu mitnpx remotion skills add. Verwende diese Skills für Fragen zur Remotion-API. - Füge in
remotion.config.tsConfig.setColorSpace("bt709");hinzu. Ohne dies wird das Video im Full Range (yuvj420p) ausgegeben, was bei manchen Playern zu Farbverschiebungen führt. - Kopiere
template/motion.tsin das Projekt (z. B. nachsrc/lib/motion.ts) und schaue dirtemplate/Example.tsxfür das Muster an: gestaffelte Eingänge mit Federung, Drift, Kameraschub, Klick und Bewegungsunschärfe. - Die Skripte in
scripts/werden mitnode <ordner-dieses-skills>/scripts/<programm>.mjsausgeführt. Sie installieren nichts.
Der Ablauf
- 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.
- 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. - 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.
- Animieren gemäß
references/bewegung.md. Lies zuerst die Liste "Was KI verrät". - Test-Frames (
npx remotion stilloderrenderStill) 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. - 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.
- Ton mit
references/ton.md:join.mjszum Hinzufügen der Musik undvolume.mjszum Anpassen auf −14 LUFS. - 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. - Sichtprüfung mit
frames.mjs(Frames-Blatt) und der Liste ausreferences/review.md. - Web-Version mit
web.mjs, falls eine leichte Datei benötigt wird. - 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 oderMath.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.