Motion Craft Kit
Quelle: github.com/iart-ai/motion-skills – 14 Open-Source-Pakete, 51 Skills, MIT-Lizenz. Dies ist eine einzelne konsolidierte Referenz. Die ursprünglichen 14 Pakete werden separat über
npx skills add iart-ai/<paket-name>oder als Claude Code Plugins installiert. Dieser Skill deckt das gesamte Gebiet ab, sodass Sie die Karte an einem Ort haben.
INFO
| Repository | iart-ai/motion-skills (upstream, MIT) |
| Konsolidiert von | V4TIME — V4SKILL |
| Was es ist | 51 Motion-Design/Animations/Video-Skills für KI-Codierungsagenten, neu organisiert |
| Format | Referenz-Skill – liest sich wie ein Handbuch, eine SKILL.md |
| Original-Pakete installieren | npx skills add iart-ai/tiktok-video-skills usw. |
| Wann zu verwenden | Bei jeder Anfrage, die Motion-Design, Animation, Videoproduktion, Web-Motion, Datenvisualisierung, 3D/WebGL, mathematische Animation oder das Freelancer-Bewegungsgeschäft betrifft |
Hauptthema
Bringen Sie einem KI-Codierungsagenten bei, Motion-Design, Animation und Video über die gesamte Pipeline zu produzieren – von einem hakengetriebenen TikTok-Clip bis zu einem WebGL-Shader-Hintergrund, von einem erzählten Erklärvideo bis zu einem Dokument für Marken-Bewegungssysteme. Die Sammlung deckt 14 Bereiche ab, jeder mit seinem eigenen installierbaren Paket, und teilt eine gemeinsame Struktur: Jeder Skill ist eine eigenständige SKILL.md + references/-Ordner, die einen Workflow lehrt. Skills, die ein visuelles Artefakt produzieren, liefern einen Liefer- und Überprüfungszyklus plus ein kleines scripts/-Toolkit.
Der rote Faden: Bewegung als Handwerk, nicht als Magie. Jedes Paket basiert auf realer Produktionstechnik – Timing/Easing-Prinzipien, bildgenaue Schnitte, Beat-Synchronisation, 60-fps Disziplin, Plattformspezifikationen, Barrierefreiheit – nicht nur „lass es animieren".
Haupt-Schlüsselthemen
-
Kurzform-Vertikalvideo hat eine eigene Grammatik. Hooks, Pattern Interrupts, Tempo, Retention-Editing, wortgenaue Untertitel, untere Drittel, Countdown-Timer – 9:16 ist seine eigene Sprache, nicht nur „gedrehtes Video".
-
Daten treiben die Bewegung an. Diagramm-Rennen, hochzählende Ticker, animierte Infografiken, Wrapped-ähnliche Zusammenfassungen, Werbemittel aus CSV gebatchet – die Bewegung ist eine Funktion der Zahlen, die auf jedem Frame exakt gerendert wird.
-
Kinetische Typografie ist Text-als-Bewegung. Zeichen/Wort/Zeilen-Staffelungen, Split-Text-Enthüllungen, Gewichtsübergänge von variablen Schriftarten, Text auf einem Pfad, Lied-/Titelkarten – Text sitzt nicht still, er führt auf.
-
Web-Motion lebt oder stirbt bei 60fps und Barrierefreiheit. Nur
transform/opacityanimieren, Layout-Thrash vermeiden,prefers-reduced-motionmit gestufter Degradierung respektieren, Seitenübergänge im Next.js App Router, Mikrointeraktionen, SVG-Strichzeichnungen, Lottie-Wiedergabe. -
3D/WebGL ist eine separate Spur. GLSL-Fragment-Shader, Three.js/R3F-Szenen, Partikelsysteme – GPU-gebunden, bewusst im Speichermanagement, als Hintergründe und Effekte eingesetzt, nicht als das gesamte Produkt.
-
Mathematische Animation ist ihr eigenes Handwerk. Manim CE – Szenen, Mobjects, LaTeX-Morphs, ValueTracker, 3D-bewegte Kamera – für 3Blue1Brown-artige Lehrvideos und Gleichungsvisualisierungen.
-
Redaktionelle Kartenanimation ist Geografie-als-Geschichtenerzählen. Kamera-Zooms, eingezeichnete Routen, fallengelassene Pins, Regionshervorhebungen, der 12fps-Stotter – Vox-Stil, aus Google Earth Studio oder GeoJSON/SVG.
-
Marken-Bewegung ist ein System, kein Einzelfall. Easing-/Timing-Token, Bewegungsbibliotheken, Logoregeln, Barrierefreiheitsstandards – einmal erstellt, überall referenziert.
-
Freelancer-Motion ist ein Geschäft. Briefings, Preisgestaltung, Revisionsgrenzen, Liefervorgaben, Marken-Bewegungsrichtlinien – das Back-Office, das einen Motion-Designer oder ein Studio liquide hält.
-
Jeder visuelle Skill liefert einen Überprüfungszyklus. Ein Bild einfrieren, eine Kontaktseite erstellen, die codierte MP4 untersuchen – der Agent bestätigt seine eigene Ausgabe, bevor er sie zurückgibt. Web-Skills rendern eigenständiges HTML; Video-Skills rendern über Remotion oder Manim.
Die 51 Skills – Konsolidiert, Neu Geordnet, Neu Geschrieben
Organisiert nach Arbeitsablauf, nicht nach ursprünglichem Paket. Die Reihenfolge wurde geändert. Die Erklärungen für etwa die Hälfte wurden von Grund auf neu geschrieben; der Rest wurde aus den ursprünglichen README-Beschreibungen zusammengefasst.
A. Kurzform-Vertikalvideo (TikTok / Reels / Shorts)
1. short-form-video
Was es tut: Die strukturelle Grammatik von vertikalem 9:16-Video – Hooks, die den Wisch überleben, Pattern Interrupts, die die Aufmerksamkeit zurücksetzen, Tempo, das die Bindung hält, und wiederholbare Vorlagenstrukturen, die Sie neu einkleiden können. Lehrt das Problem der ersten 3 Sekunden als Designbeschränkung, nicht als vages Gefühl.
Wann es aktiviert wird: Erstellen eines Reels/TikToks/Shorts, Erstellen einer wiederverwendbaren Kurzformvorlage, Bearbeiten für die Bindung, Beheben schwacher Opener, Straffen des Tempos, Erstellen einer nahtlosen Schleife.
2. caption-animation
Was es tut: Wortgenaue Karaoke-artige Untertitel aus einem Transkript oder Voiceover – Timing des Einblendens pro Wort, Hervorhebung des aktiven Wortes, Platzierung im Safe-Bereich, sodass Untertitel niemals mit der Plattform-UI kollidieren. Rendert eingebrannte Untertitel oder liefert das getimete Wortarray zur Einspeisung in einen anderen Renderer.
Wann es aktiviert wird: Umwandeln eines Voiceovers in Hormozi-artige Wort-für-Wort-Untertitel, Einbrennen von Untertiteln in einen Clip, Hinzufügen animierter Untertitel zu einem Reel.
3. countdown-video
Was es tut: Bildgenaue, driftfreie Countdown-Timer mit Ziffern-Umklapp-/Rollenbewegung und konfigurierbarer Dauer – „Startet bald"-Bildschirme, Start-/Verkaufs-Countdowns, animierte Zähler, die zum exakt richtigen Bild auf Null landen. Gelöst gegen das Driftproblem, das die meisten naiven Timer-Implementierungen zerbricht.
Wann es aktiviert wird: Erstellen eines Countdown-Timers, „Startet bald"-Bildschirms, Startcountdowns, animierten Zählers, der auf Null enden muss.
4. lower-thirds
Was es tut: Saubere, gebrandete Namens-/Rollen-Einblendungen im unteren Drittel mit gestaffelter Ein-/Aus-Animation – vorlagenbasiert, sodass Sie eine ganze Liste mit demselben Look und verschiedenen Namen durchlaufen können. Beinhaltet Safe-Bereich-Platzierung und Markenverriegelung (Farben, Schriftart, Logoplatzierung).
Wann es aktiviert wird: Erstellen animierter Einblendungen im unteren Drittel, Namensschilder, Sprecher-Overlays, Broadcast-artige Titel über einer Liste von Personen.
5. text-message-animation
Was es tut: Animiert eine Chat-Konversation – Sprechblasen erscheinen nacheinander, Tipp-Indikatoren pulsieren, Sendegeräusche landen auf dem Beat, der Thread scrollt automatisch – über iMessage/WhatsApp/SMS-Ästhetiken, gerendert aus einem Nachrichtenarray oder CSV, sodass eine Vorlage endlose Videos produziert.
Wann es aktiviert wird: Erstellen eines gefälschten Textnachrichtenvideos, einer iMessage-Geschichte, eines WhatsApp/SMS-Konversationsclips, einer Chat-Antwortanimation, Batching von Textnachrichtenvideos aus einer CSV.
B. Podcast / YouTube / Langform
6. audiogram
Was es tut: Verwandelt einen Podcast-Clip, ein Voiceover oder ein Zitat in ein untertiteltes Wellenformvideo, das für Reels/TikTok/Shorts/Feed-Posts dimensioniert ist – reaktive Wellenform, optionaler Fortschrittsbalken, Untertitel, quadratischer oder vertikaler Output. Der audio-getriebene visuelle Faden ist das Produkt, keine Dekoration.
Wann es aktiviert wird: Erstellen eines Audiogramms, Umwandeln eines Podcasts in ein Video, Hinzufügen einer bewegten Wellenform zu einem Voiceover, Exportieren eines Podcast-Zitats in soziale Medien.
7. youtube-intro-outro
Was es tut: Erstellt einen 3–5s gebrandeten Intro-Sting und ein 20s Endscreen-Outro, das die klickbaren Elementzonen von YouTube (Abonnieren-Button, Nächstes-Video-Karte usw.) als Designbeschränkungen respektiert, nicht als nachträglichen Einfall. Wiederverwendbare Vorlage, bei der sich nur Name/Logo/Farben/Sting pro Kanal ändern.
Wann es aktiviert wird: Erstellen eines YouTube-Intros, Kanal-Bumpers, Logo-Stings, Outros, End Screens, End Cards mit Abonnieren/Nächstes-Video-Bereich.
C. E-Commerce / Produkt
8. product-demo-video
Was es tut: Verwandelt statische Produkt-/App-Screenshots in eine polierte animierte Demo – Geräterahmen, synthetischer Cursor + Klick, Zoom-zu-Region, Feature-Beschriftungen – sodass ein flacher Screenshot ohne Bildschirmrekorder zu einem Rundgang wird. Bildgenaue Kontrolle darüber, was der Betrachter wann sieht.
Wann es aktiviert wird: Erstellen einer Produktdemo, eines App/SaaS-Rundgangs, eines Feature-Ankündigungsvideos aus Screenshots, Einrahmen jedes Screenshots in einem Browserfenster.
9. promo-video
Was es tut: Knackiger 6–15s Verkaufsspot – Rabatt-Enthüllung, war→jetzt Preis-Durchstreichung, Promo-Code, Countdown, CTA – gebatchet über viele Produkte aus einer Datentabelle, sodass eine Vorlage N Promos mit aus den Daten gezogenen Preisen rendert. Entwickelt für Black Friday / Flash-Sales, wo die Menge zählt.
Wann es aktiviert wird: Erstellen eines Sale/Promo/Rabatt-Enthüllungs/Black Friday/Flash-Sale-Videos, Batching von Promos über eine CSV von Angeboten.
10. photo-slideshow
Was es tut: Verwandelt einen Ordner mit Fotos in ein fertiges Video – Ken-Burns-Bewegung pro Foto, beat-synchronisierte Übergänge, gemischte Seitenverhältnisse werden gehandhabt, Beschriftungen oben. Die Fotos werden nicht einfach geschnitten; sie bewegen sich mit Absicht.
Wann es aktiviert wird: Verwandeln von Fotos in eine Diashow/Montage/Rückblick-Video mit Musik, Ken-Burns-Bewegung synchronisiert zu einem Track.
D. Anzeigen / Marketing
11. ad-creative-video
Was es tut: Eine datengesteuerte Anzeigenvorlage × eine CSV = N nachrichtenangepasste Varianten, exportiert in jedes Platzierungs-Seitenverhältnis (9:16, 4:5, 1:1, 16:9) für A/B-Tests. Das Creative ist parametrisiert, sodass Hook, Body, CTA und Angebot alle aus der Datenzeile stammen.
Wann es aktiviert wird: Erstellen einer Videoanzeige, Batching von Anzeigenvarianten aus einer Datentabelle für A/B-Tests, Exportieren einer Anzeige in mehrere Seitenverhältnisse für Meta/TikTok/Reels/YouTube.
12. launch-video
Was es tut: Hochenergetische Produkteinführungs-/Hype-Filme – Hook → Teaser → Enthüllung → Feature-Montage → Endkarten-CTA, geschnitten zum Beat. Die Struktur ist eine Vorlage; die Energie ist die Variable, die Sie einstellen.
Wann es aktiviert wird: Erstellen eines 30s Produkteinführungsvideos, Hype-Reels, beat-synchronisierter Enthüllung, Endkarten-CTA-Films.
13. testimonial-video
Was es tut: Animierte Zitat-/Bewertungsclips mit gestaffelten Zeilenenthüllungen, Betonung von Schlüsselphrasen, gebrochenen Sternbewertungen und einem Autorenblock – verwandelt eine Liste von Kundenrezensionen in jeweils ein Social-Proof-Video, markengebunden.
Wann es aktiviert wird: Verwandeln von Kundenrezensionen in animierte Testimonial-Clips, Zitatvideos mit Sternbewertungen, Social-Proof-Video aus einer Bewertungsliste.
E. Erklärvideo / Lehrreich
14. explainer-video
Was es tut: Verwandelt eine Nachricht in ein getaktetes, erzähltes 30–90s Kurzvideo – Skript → Storyboard → Szenenbau → Erzählungs-/Untertitel-Synchronisation → Bearbeitung → Verfeinerung. Die gesamte Pipeline, nicht nur ein Render-Schritt. Überbrückt die Skript-zu-Bildschirm-Lücke, die die meisten Motion-Tools überspringen.
Wann es aktiviert wird: Erstellen eines Erklärvideos, einer Funktionsweise, eines Onboardings oder eines Konzeptvideos; Verwandeln einer Funktion in einen erzählten Funktionsweise-Clip.
15. wrapped-video
Was es tut: Erstellt „Spotify Wrapped"-artige Zusammenfassungen – eine Vorlage × eine Datentabelle → viele personalisierte 9:16-Videos, jedes aus einer Zeile befüllt. Die Vorlage bleibt; die Daten variieren pro Benutzer.
Wann es aktiviert wird: Erstellen eines Spotify-Wrapped-artigen Jahresrückblick-Videos aus einer CSV von Benutzern, Pro-Benutzer-Statistikvideos.
16. diagram-animation (neu geschrieben)
Was es tut: Zeigt Diagramme und Charts im Laufe der Zeit an, anstatt sie als Ganzes aufzublitzen – progressive Knoten-/Kantenenthüllungen, fließende Verbinder, die sich selbst zeichnen, wachsende Balken, die klettern, hochzählende Zähler. Der Betrachter liest das Diagramm, während es aufgebaut wird, nicht als ein statisches Bild, das plötzlich existiert. Behandelt Architekturdiagramme, Flussdiagramme und Daten-Charts auf die gleiche Weise: gestaffelte Offenlegung.
Wann es aktiviert wird: Animieren eines Diagramms, Flussdiagramms, einer Architektur oder eines Charts Schritt für Schritt; Enthüllen Knoten für Knoten; Wachsenlassen von Balken und Hochzählen von Zahlen.
17. whiteboard-animation (neu geschrieben)
Was es tut: Zeichen-„VideoScribe"-artige Erklärvideos – eine Hand skizziert Illustrationen und Handschrift auf eine Tafel, Strich für Strich, getaktet zur Erzählung. Die Enthüllung ist die Bewegung; die Hand ist das Mittel. Kein Ersatz für guten Inhalt, sondern der Liefermechanismus, der eine einfache Illustration wie eine sich entfaltende Lektion wirken lässt.
Wann es aktiviert wird: Erstellen eines Whiteboard-artigen Erklärvideos, Zeichenanimation, handskizzierte Illustrationen, getaktet zur Erzählung.
18. isometric-animation (neu geschrieben)
Was es tut: Isometrische / 2.5D-Szenen – gestapelte Schichten, extrudierte Blöcke, Explosionsdiagramme, isometrische Gitter mit gestaffelten Enthüllungen und Kamera-Drift. Verleiht flachen Diagrammen eine dritte Dimension, ohne vollständig in 3D zu gehen; die Kamera driftet, die Schichten trennen sich, der Betrachter erhält Tiefenhinweise ohne eine WebGL-Pipeline.
Wann es aktiviert wird: Erstellen isometrischer/2.5D-Szenen, gestapelter Schichtendiagramme, Explosionsansichten, isometrischer Gitter mit gestaffelten Enthüllungen und Kamera-Drift.
19. manim (neu geschrieben)
Was es tut: Erstellt Mathe/Physik/Computerwissenschaft-Animationen in Python mit Manim Community Edition – Szenen & Mobjects, Animationsprimitive, LaTeX/MathTex-Gleichungsmorphs, Graphen & Updater (ValueTracker), 3D & bewegte Kamera, CLI-Rendering zu MP4/GIF mit einem Render-einen-Frame-zuerst-Überprüfungszyklus. Der 3Blue1Brown-Toolchain, verfügbar für einen Agenten, der den Szenencode schreiben kann.
Wann es aktiviert wird: Erstellen einer Mathe-Animation, Animieren einer Gleichung, Verwenden von Manim, Erstellen eines 3Blue1Brown-artigen Videos, Plotten und Animieren einer Funktion, Verwandeln einer Formel in eine andere, Rendern einer 3D-Oberfläche mit einer umlaufenden Kamera.
F. Kinetische Typografie
20. kinetic-typography
Was es tut: Animiert Text über CSS, GSAP SplitText, Framer Motion und Remotion – Zeichen/Wort/Zeilen-Staffelungen, Split-Text-Enthüllungen, Gewichtsübergänge von variablen Schriftarten, Text auf einem Pfad, Lied-/Titelkarten. Text ist das Bewegungssubjekt, nicht ein Etikett, das auf etwas anderem sitzt.
Wann es aktiviert wird: Animieren einer Überschrift, Erstellen eines kinetischen Typografie-Videos, Erstellen einer animierten Titel- oder Lyrik- oder Untertitelkarte, Staffeln von Text nach Zeichen/Wort/Zeile, Erstellen eines Lied- oder Untertitelvideos, Animieren eines variablen Schriftgewichts, Platzieren von Text auf einem Pfad.
G. Web-Animation
21. gsap-web
Was es tut: Codegetriebene Web-Motion mit GSAP – Timelines, ScrollTrigger, SplitText, Flip und Lenis-Smoothscroll-Synchronisation. Das branchenübliche Timeline-Tool, das in eine Webseite eingebunden ist, nicht ein geschlossenes Plugin.
Wann es aktiviert wird: Erstellen von scrollgetriebenen, Hero- oder Text-Enthüllungsanimationen im Web mit GSAP; Fixieren eines Hero-Abschnitts, der eine Timeline zum Scrollen durchläuft.