Motion Graphics mit Claude
Worum es geht
Mit Claude Code und HyperFrames entsteht ein animiertes Video ohne Schnittprogramm und ohne Designer. HyperFrames behandelt ein Video wie eine Webseite: Claude schreibt die Animation als HTML und GSAP (eine Animationsbibliothek), HyperFrames rechnet daraus die MP4-Datei. Das funktioniert gut für Titelkarten, Erklärgrafiken, Zahlen und kurze Reels.
Ehrlich vorab: Ein Satz reicht nicht. Der erste Wurf ist meistens brauchbar, aber selten schön. Wer drei Runden Feedback einplant, kommt zu etwas Brauchbarem. Ton liefert Claude nicht mit, der kommt separat dazu.
Was du brauchst
- Claude Code (das Werkzeug, mit dem Claude Dateien auf deinem Rechner schreibt und Befehle ausführt).
- Node.js, damit die Befehle laufen. Claude kann dir beim Einrichten helfen, sag einfach «prüf, ob alles installiert ist».
- HyperFrames. Es gibt eine Vorschau (`npx hyperframes preview`) und einen Render-Befehl (`npx hyperframes render`). Claude führt sie für dich aus.
Das Vorgehen in drei Feedback-Runden
Runde 1: Inhalt und Takt. Du gibst den Start-Prompt (unten). Claude baut eine erste Version. Du prüfst nur: Stimmt der Inhalt? Sind Reihenfolge und Länge richtig? Über Stil redest du noch nicht.
Runde 2: Bewegung. Jetzt die Animation. Gleichzeitig zu viele Bewegungen? Zu schnell, zu hektisch? Sag es in normalen Worten: «Der Titel soll ruhiger einlaufen», «Die Zahl erst erscheinen lassen, wenn der Titel steht.»
Runde 3: Feinschliff. Kanten, Abstände, Farben, sicherer Bereich. Schau dir einzelne Bilder an, nicht nur das laufende Video. Erst wenn alles sitzt: fertig rendern.
Jede Runde: Schau dir die Vorschau an, schreib, was du ändern willst, und lass Claude nur das ändern. Sag dazu ausdrücklich, was bleiben soll.
Der Start-Prompt zum Kopieren
Bau mit HyperFrames ein kurzes animiertes Video im Format 9:16 (1080 mal 1920 Pixel), Länge 12 Sekunden. Inhalt: [Was soll gezeigt werden, z.B. "Drei Zahlen zu unserem Angebot, eine nach der anderen"]. Marke: Hintergrund [Farbe], Schrift [Schriftname], Akzentfarbe [Farbe], Logo unten [Datei]. Stilregeln: - Es bewegt sich immer nur eine Sache gleichzeitig. - Ruhige Kurven (sanftes Ein- und Auslaufen, keine federnden Effekte). - Text immer gut lesbar, mindestens 60 Pixel gross, viel Leerraum. - Kein Text im oberen Bereich (220 Pixel) und im unteren Bereich (380 Pixel), dort überdeckt Instagram das Bild. Starte die Vorschau und sag mir, wie ich sie öffne. Rendere noch nicht.
Wenn du noch keine Marke hast, schreib «schlichte Farben, ein Akzent», und Claude schlägt etwas vor.
Stilvorgaben, die den Unterschied machen
- Eine Bewegung gleichzeitig. Mehrere Dinge auf einmal wirken hektisch und billig. Nacheinander wirkt ruhig und professionell.
- Ruhige Kurven. Sanft beschleunigen, sanft bremsen. Der Sprung von links ins Bild wirkt schneller als ein sanfter Einlauf.
- Marke führt. Gib Farben und Schrift vor. Ohne Vorgabe fällt das Modell auf Standardlooks zurück.
- Ein Referenzbild hilft. Zeig Claude ein Bild oder eine Seite, die den Stil trifft, und sag: «In dieser Richtung.»
- Kurz bleiben. Zwölf Sekunden mit einer Aussage schlagen dreissig mit dreien.
Typische Fehler und wie du sie behebst
- Text abgeschnitten. Zu lange Zeile oder zu grosse Schrift. Sag: «Der Text ist am Rand abgeschnitten, verkleinere oder brich um, mindestens 80 Pixel Rand links und rechts.»
- Text im falschen Bereich. Auf Instagram Reels überdeckt die App oben etwa 220 Pixel und unten etwa 380 Pixel. Alles Wichtige gehört dazwischen. Sag Claude die Masse gleich im Start-Prompt.
- Wort allein auf der Zeile. Sag: «Kein einzelnes Wort auf einer Zeile, Zeilen ausgleichen.»
- Ton fehlt. HyperFrames liefert ein stummes Video. Ton (Musik, Effekte) kommt in der Nachbearbeitung dazu oder über die Musikauswahl in Instagram selbst. Viele schauen ohnehin ohne Ton: Die Botschaft muss im Text stehen.
- Flackern bei Unschärfe-Effekten. Wenn unscharfe Übergänge beim Rendern flackern, hilft laut Praxisberichten, mit nur einem Render-Prozess zu rendern (`--workers 1`). Sag Claude: «Rendere mit einem Worker.»
- Alles ändert sich mit einem Mal. Wenn Claude in einer Runde mehr ändert als gewünscht, schreib: «Nur diese eine Sache ändern, alles andere bleibt wie in der letzten Version.»
Die Freigabe
Wie immer: Claude baut, du gibst frei. Schau das fertige Video einmal komplett an, mit Ton, bevor du es postest. Ein Video postest du nie ungesehen.
Mehr davon, Schritt für Schritt: der Online-Kurs «Stell deine KI ein». Du arbeitest einen KI-Agenten ein wie einen neuen Mitarbeiter, zuerst mit deiner Freigabe. Wer auf der Warteliste steht, hört zuerst davon. Keine Verpflichtung.
Zum Online-Kurs