Guide zum Video · Content mit AI
Motion Graphics mit Claude Code: vom Prompt zur MP4
Die Technik hinter meinem Showreel als Setup für Claude Code: Ein Prompt richtet dir die Werkstatt ein, fünf Vorlagen liefern fertige MP4s. Plus wie du einzelne Szenen korrigierst.
Stand 27. September 2026 · Zum Reel
Das ist die Technik hinter dem Showreel aus meinem Video, verpackt als Setup für Claude Code. Ein Prompt richtet dir eine Werkstatt ein, danach baust du mit fünf Vorlagen deine eigenen Clips.
Das Prinzip: Claude animiert nicht in einem Videoprogramm. Es schreibt jedes Bild als Code, rendert es einzeln und setzt daraus eine fertige MP4 zusammen. Kein After Effects, keine Vorlagen, kein Schnittprogramm.
Was du brauchst
Claude Code mit einem Pro-, Max-, Team- oder Enterprise-Konto. Mit dem kostenlosen Claude-Plan geht es nicht.
Opus 5.5 als Modell. Das stellst du in Claude Code mit /model ein. Mein Showreel hat Opus 5.5 gebaut.
Node.js in der LTS-Version von nodejs.org, aktuell Version 24. Ob es schon installiert ist, siehst du im Terminal mit node --version.
Alles andere installiert Claude im nächsten Schritt selbst: Playwright mit einem eigenen Chromium, das die Bilder rendert, und ffmpeg, das daraus das Video macht. Admin-Rechte brauchst du dafür nicht. Chromium ist ein einmaliger Download von knapp 300 MB.
Die Werkstatt einrichten
Leg einen leeren Ordner an, zum Beispiel motion-werkstatt, starte Claude Code darin und füg diesen Prompt ein:
Richte mir in diesem Ordner eine Werkstatt für Motion Graphics ein. Ich beschreibe dir später ein Video, du baust es komplett als Code und legst mir am Ende eine fertige MP4 in den Ordner.
So soll die Werkstatt funktionieren:
Jedes Video ist eine HTML-Seite mit einem Canvas und bekommt einen eigenen Unterordner. Eine Funktion renderAt(t) zeichnet das Bild für den Zeitpunkt t in Sekunden. Keine Animation in Echtzeit, keine Bildschirmaufnahme. Zufall nur mit festem Seed, damit jeder Durchlauf gleich aussieht. Größe, Länge und Bildrate stellt jedes Video selbst ein, Standard sind 1920 × 1080 und 60 Bilder pro Sekunde.
Jedes Video ist in benannte Szenen mit Start- und Endzeit gegliedert. Die Szenenliste zeigst du mir nach jedem Render, damit ich gezielt Feedback geben kann.
Ein Render-Skript in Node, das für alle Videos gleich ist, öffnet die Seite mit Playwright in Chromium, ruft renderAt für jedes einzelne Bild auf, macht einen Screenshot und schickt die Bilder direkt an ffmpeg. Ausgabe als MP4 in H.264 mit yuv420p und BT.709, damit sie überall abspielt und die Farben exakt stimmen. Die MP4 landet im Unterordner des Videos.
Für Motion Blur rendert das Skript pro Bild vier Zwischenbilder innerhalb einer halben Bilddauer und legt sie übereinander. Bei schnellen Bewegungen nimmst du mehr Zwischenbilder, statt langsamer zu animieren. Zähler und andere Sprünge wie Textwechsel bekommen keinen Blur.
Vor jedem finalen Render gibt es ein Kontaktblatt: 12 bis 20 Bilder über die ganze Länge verteilt, als Raster in einem JPG. Das schaust du dir selbst an und besserst nach, bevor du das ganze Video renderst. Schnelle Bewegungen prüfst du zusätzlich an einzelnen Bildern in voller Größe, damit der Blur nicht in sichtbare Einzelkopien zerfällt.
Jedes Video bekommt eine feste Farbpalette mit höchstens fünf Farben und höchstens drei Schriftfamilien. Die Schriften lädst du als Dateien in den Ordner, damit jedes Bild gleich aussieht.
Installier alles, was geht, lokal in diesem Ordner. Für ffmpeg nimmst du das npm-Paket ffmpeg-static, dann muss ich nichts systemweit installieren. Fehlt Node.js auf meinem Rechner, sag mir, wie ich es installiere, und warte.
Schreib diese Regeln und die Befehle zum Rendern in eine CLAUDE.md in diesem Ordner, damit du sie bei jedem neuen Video wieder befolgst.
Zum Schluss bau einen Testclip: 5 Sekunden, ein Wort fliegt ein, eine Form verwandelt sich in eine andere, ein Zähler läuft hoch. Render ihn als MP4 und sag mir, wo er liegt.
Claude fragt dich zwischendurch ein paar Mal, ob es Befehle ausführen darf, etwa für die Installation. Die bestätigst du. Am Ende liegen im Ordner ein Render-Skript, eine CLAUDE.md mit den Regeln und dein erster Testclip als MP4. In meinem Test war das nach rund zehn Minuten erledigt.
Ab jetzt startest du jedes Video in diesem Ordner. Claude Code liest die CLAUDE.md bei jedem Start automatisch mit, die Regeln musst du also nie wieder erklären.
Die vier Regeln dahinter
Die Regeln stehen jetzt in deiner CLAUDE.md. Wenn du weißt, wofür sie da sind, gibst du besseres Feedback.
Jedes Bild ist eine Funktion der Zeit. Claude zeichnet für jeden Zeitpunkt ein eigenes Bild, statt eine Animation in Echtzeit abzuspielen und abzufilmen. Deshalb fehlt kein einziges Bild, auch nicht bei 60 Bildern pro Sekunde, und jeder Durchlauf sieht exakt gleich aus.
Motion Blur aus Zwischenbildern. Pro Bild rendert das Skript mindestens vier Zwischenbilder und legt sie übereinander, bei schnellen Bewegungen mehr. Bewegung wirkt dadurch wie gefilmt und nicht wie eine Diashow. Zähler und Textwechsel bleiben scharf, sonst stehen zwei Ziffern übereinander.
Kontaktblatt vor dem Render. Bevor Claude das ganze Video rendert, legt es 12 bis 20 Bilder als Raster in ein Bild und schaut es sich selbst an. Abgeschnittene Texte, Überlappungen und leere Szenen fallen so auf, bevor der lange Render läuft. Beim Showreel hat Claude auf diese Weise selbst nachgebessert, bevor ich das erste Bild gesehen habe.
Feste Palette, höchstens drei Schriften. Jedes Video bekommt maximal fünf Farben und drei Schriften, und die Schriften liegen als Dateien im Ordner. Das hält den Clip zusammen, und kein Bild fällt auf eine Ersatzschrift zurück.
Fünf Prompt-Vorlagen
Setz deine echten Inhalte in die eckigen Klammern. Je genauer du Farben, Schrift und Ablauf vorgibst, desto weniger korrigierst du danach. Wenn du keine Farben im Kopf hast, schreib „such dir eine Palette aus, die zu [Marke] passt“.
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it’s your showreel for a résumé. go all out.
Das ist der Prompt, der gerade überall rumgeht. In der Werkstatt folgt Claude dabei deinen Regeln und legt dir am Ende eine fertige MP4 in den Ordner. Stell vorher mit /effort max den höchsten Effort ein, das Showreel ist eine lange Aufgabe. Dein Ergebnis sieht anders aus als meins: Ohne Vorgaben entscheidet Claude jedes Mal neu.
Bau mir einen Launch-Clip für [Produkt], 20 Sekunden, 1920 × 1080.
ABLAUF: 0 bis 4 Sekunden baut sich der Produktname auf. 4 bis 14 Sekunden kommen drei Features, je eine Szene: [Feature 1], [Feature 2], [Feature 3]. 14 bis 20 Sekunden stehen Logo und der Satz [Claim].
LOOK: Farben [z. B. #1A1C2D, #C8AA6E, Weiß], Schrift [z. B. Space Grotesk]. Ruhig und präzise, jede Bewegung hat einen Grund.
Das Logo liegt als [logo.svg] im Ordner.
Bau mir einen Logo-Reveal, 5 Sekunden, 1920 × 1080. Das Logo liegt als [logo.svg] im Ordner.
Das Logo setzt sich aus seinen eigenen Formen zusammen und steht ab Sekunde 3 still. Darunter blendet [Name oder Slogan] ein. Hintergrund [Farbe], die übrigen Farben kommen aus dem Logo.
Nimm dein Logo als SVG. Dann kann Claude die einzelnen Formen animieren, mit einem PNG geht nur das Logo als Ganzes.
Bau mir eine Zahlen-Animation im Hochformat, 1080 × 1920, 8 Sekunden, für ein Reel.
ABLAUF: 0 bis 3 Sekunden zählt die Zahl [z. B. 3,2 Mio.] von null hoch, darunter steht [was die Zahl bedeutet]. 3 bis 6 Sekunden baut sich ein Balkendiagramm mit diesen Werten auf: [Wert 1], [Wert 2], [Wert 3]. Danach bleibt alles stehen.
Die große Zahl ist das größte Element im Bild, im Diagramm ist der wichtigste Balken farbig hervorgehoben. Alle Texte bleiben in der Bildmitte, damit die App-Oberfläche nichts verdeckt.
LOOK: Farben […], Schrift […].
Bau mir ein Panel für den oberen Teil eines Reels, 1080 × 640, [Länge] Sekunden. Darunter stehe ich später selbst im Bild.
INHALT: [was das Panel zeigen soll, z. B. drei Schritte einer Anleitung, je 3 Sekunden, mit diesen Stichworten: …]
LOOK: voller Hintergrund in [Farbe], Farben […], Schrift […]. Wichtige Inhalte in die Mitte des Panels, nicht an den Rand, oben blendet die App ihre Kopfzeile ein. Schon das erste Bild zeigt Inhalt, und zwischen den Schritten gibt es kein leeres Bild.
Genau so sitzt das Showreel in meinem Reel. Weil das Panel einen vollen Hintergrund hat, brauchst du keinen Alpha-Kanal: Du legst die MP4 in deinem Schnittprogramm oben bündig über deine Aufnahme, fertig.
Echtes Filmmaterial baut die Werkstatt nicht. Sie macht Typo, Formen, Diagramme und 3D aus Code. Deine Aufnahmen schneidest du weiter wie gewohnt und legst die Clips aus der Werkstatt darüber.
Korrigieren wie ein Regisseur
Die erste Fassung ist ein Entwurf. Feedback gibst du immer mit Szene und Zeitstempel, und du sagst, was bleiben soll. Dann baut Claude genau diese Szene neu und lässt den Rest in Ruhe.
Die Szene [Name] von [Sekunde] bis [Sekunde] ist mir zu [brav]. Bau nur diese Szene neu: [was passieren soll, z. B. schnellere Kamera, ein Einschlag, mehr Bewegung].
Alles davor und danach bleibt Bild für Bild, wie es ist. Zeig mir erst ein Kontaktblatt der neuen Szene, dann render das ganze Video neu.
So habe ich beim Showreel das 3D-Kapitel nachgeschärft. Nach knapp fünf Minuten war die neue Szene drin, mit Kamera-Sturzflug, Einschlag und Schockwelle. Der Rest blieb, wie er war.