opsassad/claude-code-motion-graphic-video-skill

Motion Video Studio

Ein Video ist hier eine Webseite, bei der jeder Frame eine reine Funktion der Zeit ist, render(t), aufgezeichnet ein exakter Frame nach dem anderen von scripts/record.mjs. Das ergibt frame-perfekte Bewegungen, echte Schriften, echte Produkt-UI und Code-Speed-Iteration. Die Messlatte ist Arbeit, auf die ein Senior Motion Designer stolz wäre: eine klare Idee pro Moment, Bewegung mit physischem Gewicht und jedes Element, das seinen Platz verdient.

Dieses Skill lehrt, wie man denkt und baut. Es ist keine Vorlage. Jedes Video bekommt sein eigenes Konzept aus seinem eigenen Thema. Verwenden Sie keine Szenen, Layouts oder Story-Beats aus einem vorherigen Video wieder; verwenden Sie die Engine, das Handwerk und die Lektionen wieder. Zwei mit diesem Skill erstellte Videos sollten so aussehen, als kämen sie aus demselben Studio, nicht aus derselben Form.

Bevor Sie beginnen

• Lesen Sie die Geschmacksdateien. references/taste.md enthält Lektionen, die für alle gelten. Suchen Sie dann nach dem eigenen Geschmack der Person: MOTION_TASTE.md im Projektstammverzeichnis oder ~/.claude/motion-video-taste.md projektübergreifend. Ihr Geschmack überschreibt die allgemeinen Standardeinstellungen.
• Passen Sie Ihre Ansprache an Ihr Gegenüber an. Viele Leute, die nach Videos fragen, sind keine Entwickler. Führen Sie mit dem, was sie sehen werden. Zeigen Sie gerenderte Frames, keine ASCII-Skizzen oder Text-Mockups; ein Bild klärt in einer Runde, was eine Beschreibung in fünf braucht.

Der Workflow

Jede Stufe endet mit etwas Echtem zum Anschauen, bevor Zeit in die nächste gesteckt wird.

1. Aufnahme: Welche Art von Video und Präferenzen

Fragen Sie in einer Runde, jede Frage mit einem sinnvollen Standardwert, damit eine vielbeschäftigte Person einfach „los“ sagen kann (references/intake.md):

1. Die Art des Videos, aus dem Menü in references/kinds/README.md:
   • Launch-Film, Hero-Anzeige, Erklärvideo, Story-Film, Charakter-Film
   • Kinetischer Typ, Sizzle-Reel, Teaser, Mood-Showcase
   • Walkthrough, Showcase-Reel, Data Story
2. Wo es gepostet wird und wie lang es sein soll.
3. Präferenzen: den Look, den Ton, den Sound (Musik, Stimme, Untertitel), Momente, die unbedingt gezeigt werden müssen, Dinge, die vermieden werden sollten, Referenzvideos, die sie lieben.

Lesen Sie dann das Playbook dieser Art (references/kinds/<kind>.md) und stellen Sie nur die Fragen aus dessen Liste, die das Material nicht beantworten kann.

2. Das Material und das Produkt verstehen

Fragen Sie nach der UI: das Repository (schreibgeschützt), Screenshots oder Aufnahmen und die Live-Website. Ändern Sie niemals das Repository, öffnen Sie keine Geheimnisse, loggen Sie sich nicht ein und rufen Sie keine Live-Dienste auf.

Lesen Sie es so, wie references/intake.md es beschreibt:

• Was es ist und für wen es gedacht ist
• die User Journey, Bildschirm für Bildschirm, in den eigenen Worten des Produkts
• die Verkaufsargumente, sortiert (warum jemand wechseln würde)
• der Aha-Moment
• die Marke (Logo, Farben, Schriften, Ton)
• realistische Daten
• was nicht gezeigt werden soll

Schreiben Sie die Produktverständnis-Brief und holen Sie das „Ja“ der Person ein (oder legen Sie Ihre Annahmen fest, wenn Sie alleine arbeiten). Alles, was die Person zu zeigen, zu erkunden oder zu erklären gebeten hat, kommt als „Muss gezeigt werden“ hinein.

Notieren Sie Schriftarten, Farben, Radius, Abstände, echte Kopien und echte Daten von den echten Bildschirmen. Das Video sollte wie ihre Marke aussehen, nicht wie eine generische Bewegungsvorlage; das Erfinden eines Looks ist der häufigste Grund, warum eine erste Version abgelehnt wird.

Wenn die Person ein Referenzvideo teilt, studieren Sie es Frame für Frame, bevor Sie entwerfen (bash scripts/study-reference.sh ref.mp4 out/). Schreiben Sie auf, was es tatsächlich tut:

• Kameraentfernung und -winkel
• Größe und Rolle des Textes
• was seine Farbe bedeutet
• wie Aufnahmen verbunden werden
• sein Tempo und sein Bogen

Teilen Sie der Person Ihre Interpretation mit und bestätigen Sie sie, bevor Sie bauen. Bauen Sie niemals von einem einzelnen Screenshot einer Referenz.

3. Konzept: zuerst eine originelle Idee, dann ein Stil

Bauen Sie es aus der Produktverständnis-Brief (die Journey, die sortierten Verkaufsargumente, der Aha-Moment). Machen Sie die Originalitätsmethode in references/originality.md zuerst, jedes Mal, auch wenn Sie alleine arbeiten:

1. Finden Sie die menschliche Wahrheit
2. Schreiben Sie 8 Konzepte aus 8 verschiedenen Blickwinkeln
3. Töten Sie die generischen mit den Swap- und Klischee-Tests
4. Wählen Sie den mutigsten Überlebenden, der immer noch verkauft, und notieren Sie die offensichtlichen Ideen, die Sie abgelehnt haben

Die wahrscheinlichste Idee für jedes Softwareprodukt (eine Anfrage eingeben → das Ergebnis baut → Toasts → Montage → Slogan → Logo) ist als Rückgrat verboten. Alles andere in diesem Skill (Demos, Field Guide, Rezepte, frühere Filme) zeigt Mechaniken, niemals eine Aufnahmen-Reihenfolge zum Kopieren.

Wählen Sie dann den Stil aus references/styles.md:

• Kinoreifer Produktfilm
• Clean Light Product Film
• Atmosphärisches Glas
• Gesprochener Erklärfilm
• Ein Tag im Leben
• Charaktergetrieben
• Hero Shot
• Sizzle
• Card Showcase
• Walkthrough
• Kinetischer Typ
• Data Story

Lesen Sie references/patterns.md vor der Auswahl: Es ist der Field Guide für das, was starke Launch-Filme tatsächlich tun.

Das Genre sagt, wofür das Video ist; der Stil sagt, wie es sich anfühlt. Wenn die Brief offen ist, bieten Sie zwei Stile als die zwei Richtungen an.

Schreiben Sie dann die Geschichte als einen Satz, dann die visuelle Metapher, die sie trägt, entnommen aus den eigenen Nomen und Verben des Themas. Listen Sie Szenen auf: eine Idee pro Szene, jede mit einem signifikanten Moment (der Animationsbeat, der den Punkt beweist), ebenfalls aus dem Thema. Wenn die Brief offen ist, schlagen Sie zwei Richtungen vor und lassen Sie die Person wählen. references/craft.md enthält die tiefen Prinzipien (wahr in jedem Stil), die Methode, das Bewegungsvokabular und die Timing-Regeln. Lesen Sie seine Prinzipien vor jedem Konzept.

4. Der Produktionsplan: der gesamte Film, Frame für Frame

Schreiben Sie vor jedem Code den vollständigen Plan im Format von references/plan.md:

• den Film auf einer Seite: Konzept, abgelehnte offensichtliche Ideen, Heldenobjekt, der Bogen der Gefühle, welche Verkaufsargumente wo erscheinen
• den Look als Tokens
• jede Aufnahme Frame für Frame: jede sichtbare Änderung mit Zeitstempel, plus Kamera, Effekte, Übergänge rein und raus, Text, Ton, Assets und Bewegungen
• 4–8 Keyframes gerendert als Standbilder
• die Risiken

Erwartungen haben in dieser Phase kein Limit: Beschreiben Sie den Film in seiner besten Form, bauen Sie dann darauf hin. Jede Aufnahme muss die Geschichte voranbringen; wenn nicht, streichen Sie sie. Zeigen Sie den Plan und die Keyframes an und bauen Sie nur nach einem Ja. Wenn Sie alleine arbeiten, überprüfen Sie den Plan anhand der Qualitäts-Checkliste und originality.md, und beheben Sie Probleme vor dem Bauen. Schreiben Sie jetzt jedes Voice-Over, weil es das Timing bestimmt. references/voice-and-sound.md behandelt das Skriptformat, das KI-Sprachtools gut lesen, Tempo, Aussprache und Sound. Planen Sie für eine Produkteinführung die Kette: welches Element trägt jeden Bildschirm in den nächsten (craft.md, „Connected screens").

5. Bauen

Kopieren Sie assets/engine-starter.html und assets/motion.js neben die Assets des Projekts, und bauen Sie Aufnahme für Aufnahme. Bauen Sie zuerst aus der Bewegungsbibliothek (references/moves.md):

• die Tipp-Nahaufnahme (macroType)
• countUp
• der Wand-Tauchgang (wall)
• buildIn, cascade, montage, growToWord
• cursor und clickZoom
• morphRect
• Tiefenschärfe (twin)
• shots für Schnitte und start für Vorschau und Aufnahme

assets/moves-demo.html zeigt, wie jede aufgerufen wird. Lesen Sie es nur für die Mechanik; seine Aufnahmen-Reihenfolge ist der verbotene Standard, niemals eine Vorlage. Verwenden Sie eine Bewegung nur dort, wo das Konzept sie braucht; ein Film verwendet vielleicht keine davon. Bauen Sie nur von Hand, was die Bibliothek nicht abdeckt, und wenn eine neue Bewegung sich bewährt, fügen Sie sie in derselben Form zur Bibliothek hinzu.

Nehmen Sie jede Dauer und Kurve aus references/motion-tokens.md, nicht aus Vermutungen. Befolgen Sie die Regeln und Fallstricke in references/engine.md; sie stammen von echten Fehlern.

Für alles über etwa 20 s Länge machen Sie zuerst einen schnellen groben Timing-Durchlauf: graue Boxen mit den echten Kamerabewegungen und Timings, ein paar Standbilder. Bringen Sie den Rhythmus in Ordnung, tauschen Sie dann die echte Kunst ein, ohne das Timing zu ändern.

6. Gate: Kontaktbogen

Rendern Sie 8 bis 16 Schlüsselmomente mit node scripts/record.mjs page.html stills/ --stills 1,3.5,..., dann bash scripts/contact-sheet.sh stills/ sheet.jpg. Überprüfen Sie es zuerst selbst anhand der folgenden Checkliste und der Geschmacksdateien; beheben Sie Fehler und rendern Sie neu. Zeigen Sie es erst dann der Person. Nehmen Sie das vollständige Video erst auf, wenn die Standbilder richtig sind.

7. Aufnahme, Stimme, Anpassung, Mix

Nehmen Sie einen Entwurf auf (--scale 1 --fps 30) zur Überprüfung und das Finale mit --scale 2 --blur 4: hochgesampelt, dann herunterskaliert, mit echtem filmähnlichen Bewegungsunschärfe. Wenn eine Sprachaufnahme eintrifft, führen Sie node scripts/voice-segments.mjs voice.wav aus, um jede gesprochene Zeile zu finden. Dehnen Sie die Animation auf die Stimme mit der Zeitverzerrungstabelle. Schneiden oder beschleunigen Sie die Stimme nicht. Platzieren Sie die Zeilen und die Musik mit node scripts/mix.mjs mix.json.

8. Ausliefern

Exportieren Sie pro Kanal, plus ein Thumbnail und den Post-Text (references/delivery.md). Überprüfen Sie die endgültige Datei: ziehen Sie Frames aus der mp4 selbst (ein ffmpeg-Aufruf pro Frame) und überprüfen Sie Dauer und Lautstärke.

9. Lernen

Wenn die Person reagiert, schreiben Sie auf, was sie mochte oder ablehnte, und warum, in ihre Geschmacksdatei (erstellen Sie MOTION_TASTE.md oder ~/.claude/motion-video-taste.md, wenn es ihr Geschmack ist und nicht der des Projekts). Wenn eine Lektion anderen helfen würde, schlagen Sie vor, sie zu references/taste.md hinzuzufügen. So übertrifft jedes Video das letzte.

Qualitäts-Checkliste (für jeden Kontaktbogen ausführen)

• Sieht aus wie die echte Marke/das echte Produkt: gleiche Schriften, Farben, Radius, Komponenten. Nichts erfunden.
• Eine Idee pro Bildschirm. Wenn das Auge zwei Dinge gleichzeitig lesen muss, streichen Sie eines.
• Nichts abgeschnitten, überlappend oder gequetscht: Text umbricht sauber, Logos optisch zentriert, Karten ganz, Sicherheitsabstände eingehalten.
• Farben wahr: keine ausgewaschenen Filter oder grauen Schleier; Text hat Kontrast.
• Bewegung hat Gewicht: Ein- und Ausblenden, Federn beruhigen sich, linear nur für Uhren und Fortschrittsbalken.
• Übergänge sind motiviert (eine Kamerabewegung, eine Objektübergabe, ein Stoß), und die Szene ist während des Übergangs noch lesbar.
• Bildschirm und Stimme stimmen überein: Das Gesagte ist das, was in diesem Moment auf dem Bildschirm zu sehen ist.
• Fakten sind real und können veröffentlicht werden (siehe delivery.md).
• Ende: Markenzeichen plus ein Link oder eine Aktion. Keine zusätzlichen Aufforderungen, die die Person nicht wollte.
• Auf einem Telefon lesbar: Wichtiger Text ist 40 Pixel oder mehr auf der Bühne, oder die Kamera zoomt hinein, bis es so ist. Überprüfen Sie das Blatt auf etwa 375 Pixel Breite verkleinert.
• Jede Aufnahme beruhigt sich: Nach jeder Bewegung gibt es einen stillen Moment, der lang genug zum Lesen ist (0,5 s + 0,3 s pro Wort).
• Der Stil hält: Verbindungen, Farbe, Text und Kamera folgen dem Rezept des gewählten Stils durchgängig.
• Aktionen, nicht Bildschirme: Jede Aufnahme zeigt jemanden, der etwas tut, oder das Ergebnis davon.
• Skalierung und Tempo ändern sich mindestens einmal (nah ↔ weit, langsam ↔ schnell).
• Die Akzentfarbe hat eine Bedeutung.
• Jedes Bild von Auge geprüft: das richtige Produkt für seine Bezeichnung, das richtige Logo, nichts beschnitten oder gestreckt. Öffnen Sie jedes; vertrauen Sie nicht auf Dateinamen.
• Zahlen ergeben Sinn: nur Summen und wachsende Beträge zählen hoch; Preise und feste Werte erscheinen einfach.
• Saubere Übergänge: Text verlässt die Bühne, bevor etwas darüber hinweggeht (kein Weiß-auf-Weiß-Verschlucken), und es gibt keine leeren Frames zwischen Aufnahmen.
• Spezifisch, nicht generisch: mindestens ein Moment, den nur dieses Thema haben könnte; Bibliotheksbewegungen nur dort, wo das Thema diese Aktion hat.
• Originell: Es besteht den Swap-Test, es verwendet kein verbotenes Rückgrat (originality.md), und es teilt keine Aufnahmen-Reihenfolge mit den Demos oder mit dem letzten mit diesem Skill erstellten Film.

Bevor Sie der Person etwas zeigen, bewerten Sie es mit einer Punktzahl von 10 für jeden dieser Punkte: Markenübereinstimmung, Klarheit der Geschichte, Bewegungsqualität, Lesbarkeit, Übergänge, Synchronisation von Ton/Stimme und Finish. Beheben Sie zuerst alles unter 8.

Dateien

• references/genres.md: Videotypen mit Standardwerten für Struktur, Länge und Format.
• references/intake.md: die Aufnahmefragen (mit Standardwerten), wie man ein Repository für die User Journey und Verkaufsargumente liest, und die Produktverständnis-Brief.
• references/kinds/: ein Playbook pro Videotyp (Launch-Film, Hero-Anzeige, Erklärvideo, Story-Film, Charakter-Film, Kinetischer Typ, Sizzle, Teaser, Mood-Showcase, Walkthrough, Showcase-Reel, Data Story): was zu fragen ist, Formen, die es annehmen kann, Welten, Bewegungen, Beispiele, Fallstricke. kinds/README.md ist das Menü.
• references/plan.md: das Produktionsplan-Format: der Film auf einer Seite, Look-Tokens, jede Aufnahme Frame für Frame, Keyframes, Risiken.
• references/originality.md: zuerst lesen. Die Methode für ein originelles Konzept jedes Mal: menschliche Wahrheit, 8 Blickwinkel, Tötungstests, verbotene Klischees. Es überschreibt jedes Beispiel im Skill.
• references/patterns.md: der Field Guide aus einer Frame-für-Frame-Studie von 15 starken Launch-Filmen: was fast alle tun, kinetischer Typ, Übergänge, das Produkt bei der Arbeit zeigen, wann Blickwinkel funktionieren, Strukturen, Profi-Details. Lesen Sie es in der Konzeptphase.
• references/styles.md: zwölf verschiedene Stile (Kinoreifer Produktfilm, Gesprochener Erklärfilm, Card Showcase, Walkthrough, Kinetischer Typ, Data Story, Clean Light Product Film, Atmosphärisches Glas, Ein Tag im Leben, Charaktergetrieben, Hero Shot, Sizzle), jedes ein vollständiges Rezept: Kamera, Text, Farbe, Verbindungen, Tempo, Bogen, Fallstricke.
• references/craft.md: tiefe Prinzipien, Konzeptmethode, Komposition, Bewegungsvokabular (Makro-Tippen, Wand der Ergebnisse, Verbundene Bildschirme, Klick-Zoom, Kamera), Timing.
• references/motion-tokens.md: die Zahlen: Kurven, Dauern, Federn, Staffelung, Lesehalte, Telefon-Textgrößen, ...