Motion Graphics mit Claude Code: Der komplette Workflow ohne After Effects

Das Wichtigste in Kürze

• Claude Code generiert professionelle Motion Graphics per Text-Prompt – ohne dass du eine Zeile Code schreiben musst.
• Als Rendering-Engine kommen entweder Remotion (React-basiert, schnelle Iteration) oder Hyperframes (HTML-basiert, poliertes Ergebnis) zum Einsatz.
• Der Export läuft in ProRes Alpha oder MP4 – fertig für Premiere Pro, DaVinci Resolve, Final Cut Pro oder CapCut.
• Voraussetzungen: Claude Desktop App, Node.js 18+, und – je nach Workflow – Git und FFmpeg.
• Der gesamte Stack kostet laut Erfahrungsberichten unter 100 CHF (≈ 108 €) pro Monat; eine Adobe-Lizenz ist nicht nötig.

Zehn Jahre After Effects. Tausende von Stunden im Keyframe-Editor. Freelancer-Rechnungen im fünfstelligen Bereich für einen einzigen Grafik-Auftritt. Das war lange Zeit die Realität für alle, die professionelle Motion Graphics in ihre Videos integrieren wollten. Dann kam Claude Code – und mit ihm ein Paradigmenwechsel, der sich 2026 mit rasanter Geschwindigkeit durch die Creator-Community zieht. Anthropics KI-Coding-Tool hat längst aufgehört, nur ein «Coding Assistant» für Entwickler zu sein: Es schreibt Animations-Code, rendert ihn über Spezialbibliotheken wie Remotion oder Hyperframes aus und liefert dir eine saubere Videodatei mit Alphakanal – direkt in deinen NLE-Schnitt. Kein Template-Marktplatz, keine Render-Warteschlange, kein Animator-Briefing-Ping-Pong. Nur du, ein Prompt und ein paar Minuten.

Was ist Claude Code – und was macht es für Motion Graphics?

Claude Code ist Anthropics agentenbasiertes Coding-Tool, das du über ein Terminal, die Desktop-App oder direkt in VS Code nutzen kannst. Es schreibt nicht nur Code – es führt ihn auch aus, liest Fehlermeldungen, korrigiert sich selbst und installiert bei Bedarf Dependencies. Für Motion Graphics bedeutet das konkret: Du beschreibst in natürlicher Sprache, was du animieren willst, und Claude Code übersetzt das in ein vollständiges React- oder HTML-Projekt, das anschliessend zu einem echten Videoclip gerendert wird.

Claude Code ist seit Anfang 2026 eines der meistgenutzten KI-Tools überhaupt – laut einer Analyse von UncoverAlpha erreichte es innerhalb von sechs Monaten nach Launch eine annualisierte Umsatzrate von über einer Milliarde US-Dollar, eine Geschwindigkeit, die selbst ChatGPT nicht erreicht hat. Die Breite der Anwendungsfälle geht weit über klassisches Coding hinaus: Motion Design ist inzwischen einer der populärsten kreativen Use Cases.

Zwei Wege zum fertigen Clip: Remotion vs. Hyperframes

Es gibt aktuell zwei bewährte Rendering-Engines, die sich als «Agent Skills» in Claude Code integrieren lassen. Beide funktionieren nach demselben Grundprinzip: Claude Code schreibt den Code, die Engine rendert daraus Frames und montiert sie zu einer Videodatei. Die Unterschiede liegen im Detail.

Die kurze Empfehlung: Willst du schnell iterieren und brauchst präzise Timeline-Kontrolle? Nimm Remotion. Willst du ein fertigeres, designorientiertes Ergebnis mit weniger manuellem Feinschliff? Probiere Hyperframes. Für Einsteiger ist Remotion einfacher einzurichten.

Setup: Was du brauchst, bevor du anfängst

Der Stack ist überschaubar. Du brauchst keine GPU, kein Adobe-Abo und keine Programmierkenntnisse – aber ein paar Tools müssen installiert sein.

• Claude Desktop App – Kostenloser Download auf claude.ai; für Claude Code selbst brauchst du ein Claude Pro (20 CHF/Monat, ≈ 22 €), Claude Max (100–200 CHF/Monat, ≈ 108–216 €) oder ein Console-API-Konto. Das Free-Tier ist limitiert.
• Node.js 18+ – Prüfe mit node --version im Terminal. Falls nicht installiert: nvm (Node Version Manager) ist die empfohlene Methode für macOS und Linux; für Windows empfiehlt sich WSL mit dem MSI-Installer.
• Remotion (optional, aber empfohlen für Einsteiger) – wird über npx create-video@latest im Terminal eingerichtet.
• FFmpeg – Brauchst du nur, wenn du aus einem bestehenden Video-Clip Frames extrahieren willst, damit Claude Code die Animation imitieren kann.
• Git – Wird für Hyperframes als lokale Umgebung benötigt.

Wichtig: Claude Code läuft lokal auf deinem Rechner. Das AI-Processing passiert in der Cloud von Anthropic – dein Laptop muss nur die CLI ausführen und Requests senden. Systemvoraussetzungen: macOS 13+, Ubuntu 20.04+ oder Windows 10 mit WSL, mindestens 4 GB RAM.

Der Motion-Graphics-Workflow mit Remotion – Schritt für Schritt

1. Remotion-Projekt anlegen: Öffne dein Terminal und führe den Remotion-Install-Befehl aus. Wähle «Blank» als Template, sage «Ja» zu Tailwind CSS und «Ja» zur Remotion Agent Skill-Integration. Das erstellt einen Projektordner (z.B. my-video).
2. Claude Code starten: Wechsle in den Projektordner (cd my-video), starte Claude Code im Terminal und vertraue dem Ordner. In einem zweiten Terminal-Tab rufst du npm run dev auf – das öffnet das Remotion Studio im Browser, wo jede neue Komposition in der Sidebar erscheint.
3. Inspiration sammeln: Leg dir einen Ordner mit Referenzbildern an – Screenshots aus YouTube-Videos (z.B. Ali Abdaal), Pinterest-Infografiken oder eigene Design-Mockups. Je konkreter deine Referenz, desto besser der erste Entwurf.
4. Animation generieren: Ziehe ein Referenzbild in das Claude-Code-Terminal und tippe zum Beispiel: «Use this image as inspiration to create a new composition.» Claude schreibt den Code, die Animation erscheint in Sekunden im Browser-Tab. Dann iterierst du auf Deutsch oder Englisch: «Mach den Graphen nach oben zeigend, mit 12 500 Newsletter-Abonnenten», «Ändere die Balken-Labels zu Q1 bis Q4».
5. Aus Video-Clips animieren: Claude Code kann kein Video direkt lesen. Der Trick: Passe Claude an, via FFmpeg Frames aus dem Clip zu extrahieren. Prompt-Beispiel: «Use FFmpeg to analyze the video in my Animation Inspiration folder and create a similar animation where words come in one by one.»
6. Rendern und exportieren: Im Remotion Studio auf «Render» klicken. Empfohlen: ProRes im MOV-Container für maximale Qualität. Die fertige Datei ziehst du direkt in Premiere Pro, DaVinci Resolve, Final Cut Pro oder CapCut – als normale Videospur.

Ein zentraler Praxis-Tipp, den Nutzerin Louise de Sadeleer in ihrem vielbeachteten Tutorial betont: «Gib Claude zuerst das Bild mit minimalen Instruktionen, dann iteriere. Je mehr du upfront hineinpackst, desto mehr Spielraum für Missverständnisse lässt du.» Weniger ist beim ersten Prompt wirklich mehr.

Der Workflow mit Hyperframes (für poliertes Output)

1. Tools installieren: Claude Desktop App, Git, Node.js und FFmpeg müssen vorhanden sein.
2. Hyperframes als Skill installieren: Öffne Claude Code, starte eine neue Session, wähle oder erstelle einen Projektordner. Tippe den Hyperframes-Install-Befehl (verfügbar auf der Hyperframes-Website) in das Prompt-Feld – Claude erledigt das Setup automatisch. Dann Claude Code neu starten, damit der Skill geladen wird.
3. Projekt initialisieren: Tippe in das Prompt-Feld den Init-Befehl, der die Basis-Ordnerstruktur für dein Video anlegt.
4. Erste Animation erzeugen: Zum Beispiel: «Using Hyperframes, create a 30-second motion graphics explainer video with a fade-in title, animated text, and a smooth outro.» Bei Berechtigungs-Anfragen auf «Allow» klicken. Hyperframes bricht komplexe Prompts eigenständig in Steps auf und korrigiert sich während der Generierung selbst.
5. Eigene Assets einbinden: Logos, Schriften, Brand-Colors – alles in den Assets-Ordner legen und Claude im Prompt darauf hinweisen. Hyperframes kann auch CSV/Excel-Daten für animierte Datencharts direkt verarbeiten.
6. Stil verfeinern: Hyperframes ermöglicht Referenzbilder für den visuellen Stil. Gib einfach: «Apply a visual style inspired by this image» mit angehängtem Screenshot.

Was funktioniert gut – und wo sind die Grenzen?

Aus Community-Erfahrungen und veröffentlichten Workflows lässt sich ein klares Stärke-Schwäche-Profil für Motion Graphics mit Claude Code zeichnen:

Ein Reddit-Nutzer aus der r/MotionDesign-Community bringt es auf den Punkt: «Remotion schlägt für schnelle Iterationen, Hyperframes für das polierte Ergebnis – aber Hyperframes ist auch deutlich token-hungriger. Man muss das Setup sorgfältig angehen.»

Der grösste Game-Changer für alle, die ihre Clips mit Schrifteinblendungen oder Grafiken anreichern wollen: Der transparente ProRes-Alpha-Export bedeutet, dass du Lower Thirds und Callouts einfach als Spur über dein Footage legst – kein Green-Screen-Keying, kein Masking, keine Edge-Artefakte. Das allein spart enorme Zeit.

Wenn du tiefer in die Arbeit mit KI-Tools für Video und Content-Erstellung einsteigen willst, findest du bei uns passende Kurse zu KI-Tools für Videoproduktion – praxisnah und direkt anwendbar.

Besser prompten: So holst du mehr raus

Die Qualität des Outputs hängt direkt an der Qualität deiner Beschreibung. Ein paar Muster, die sich bewährt haben:

• Technische Remotion-Terms helfen: Claude kennt das Vokabular. Nenn Frame-Zahlen statt Sekunden (30 Frames = 1 Sek. bei 30 fps), erwähne «spring animations» vs. «linear interpolation», oder «AbsoluteFill» für vollformatige Layouts.
• Briefing wie an einen Animator: Nicht «mach was Cooles», sondern «6-sekündiges Intro, Text ‚STUDIO 1‘ in fettem weissem Helvetica, fade-in und scale-up von 0.5 auf 1.0 mit Federdynamik, auf dunkelblauem Hintergrund (#0f172a)».
• Iterativ statt monolithisch: Erster Prompt gibt Richtung, dann verfeinerst du in Einzelschritten. «Animation 04 braucht einen sanfteren Exit» ist besser als alles auf einmal im ersten Prompt zu packen.
• Brand-Kontext mitgeben: Leg eine Textdatei mit deinen Farben, Fonts und dem visuellen Feel im Projektordner ab. Claude liest die und trägt das automatisch in alle Animationen ein – wie ein Animator, der sich in deinen Brand eingearbeitet hat.

FAQ

Brauche ich Programmierkenntnisse für diesen Workflow?

Nein. Du musst weder React noch JavaScript verstehen. Du beschreibst in normaler Sprache, was du animieren willst – Claude schreibt den Code, Remotion oder Hyperframes rendert ihn. Technische Fachbegriffe helfen bei der Präzision, sind aber kein Muss.

Kann ich die fertigen Motion Graphics direkt in Premiere Pro oder DaVinci Resolve nutzen?

Ja. Der Export als ProRes Alpha (.mov) oder MP4 ist kompatibel mit allen gängigen NLEs: Premiere Pro, DaVinci Resolve, Final Cut Pro, CapCut. Lower Thirds mit Alphakanal legst du einfach als Videospur über dein Footage – kein Keying oder Masking nötig.

Was kostet der Workflow pro Monat?

Die Rendering-Tools Remotion (Open Source) und Hyperframes (Apache 2.0 Basis) sind kostenlos. Claude Code selbst erfordert mindestens Claude Pro für 20 CHF/Monat (≈ 22 €) oder ein API-Konto. Erfahrungsberichte aus der Community sprechen von unter 100 CHF/Monat (≈ 108 €) für einen vollständigen produktiven Workflow.

Was ist der Unterschied zwischen Remotion und Hyperframes?

Remotion (seit 2021, ~45 000 GitHub Stars) basiert auf React und eignet sich besonders für schnelle Iterationen und präzise Timeline-Kontrolle. Hyperframes (seit April 2026, ~14 000 GitHub Stars) nutzt HTML/CSS, rendert schneller zum ersten Ergebnis und liefert gemäss Community-Feedback «design-bewusstere» Outputs – ist aber token-intensiver und etwas komplexer im Setup.

Willst du ein AI-Videoprofi werden?

Unsere AI-Kurse zeigen dir die neusten Tools — von Recherche über Schnitt bis Generierung — die du direkt im Workflow einsetzen kannst.

Noch 4 Plätze

3.-10. September 2026

AI Video Kurs September 2026

3.-10. Dezember 2026

AI Video Kurs Dezember 2026

Alle Kurse: AI: künstliche Intelligenz

Kommentare

Label

Name*

E-Mail*

Label

Name*

E-Mail*

0 Kommentare

Weitere Kommentare anzeigen