erencalik/motion-graphics-video-generator-claude

Motion Graphics Video

Erzeugt ein MP4-Video Ende-zu-Ende in Claudes Code-Umgebung – ganz ohne Bearbeitungssoftware oder Stockmaterial. Erfordert Code-Ausführung und Dateierstellung (auf claude.ai: Einstellungen > Funktionsumfang). Für ein Markenvideo lade das Logo, Fotos, Farben und Schriftarten hoch oder verweise auf eine Marken-Style-Datei. Antworte in der Sprache des Benutzers.

So funktioniert es

1. Die Animation wird als einzelne HTML-Seite geschrieben. Position, Größe, Farbe und Deckkraft jedes Elements werden aus der Bildnummer berechnet (window.renderFrame(f)); keine CSS-Übergänge, setTimeout oder requestAnimationFrame. Dadurch ist der Render-Vorgang deterministisch.
2. Headless Chrome (Playwright) erfasst jedes Einzelbild. 20 s × 60 fps = 1.200 Bilder.
3. ffmpeg wandelt die Bilder in ein MP4-Video um (H.264, yuv420p).
4. Musik wird programmatisch synthetisiert, auf die Übergänge abgestimmt und dem Video hinzugefügt.

Anfragen-Checkliste (einmal nachfragen, was fehlt)

1. Länge: 15–20 s sind ideal.
2. Format: 9:16 (1080×1920) für Reels/TikTok/Shorts, 16:9 (1920×1080) für YouTube/Portfolio.
3. Quellmaterial: eine Webseite, hochgeladene Fotos, ein Logo oder nichts.
4. Stil: benenne die Technik: kinetische Typografie, animierte Infografik/Statistik, Partikel, Halbton, Karte/Topografie, Zähler, Zeitleiste. Eine benannte Technik liefert zuverlässigere Ergebnisse.
5. Regeln und Ausschlüsse: Farben, die übereinstimmen sollen, Dinge, die weggelassen werden sollen (z. B. Preise, zusätzlicher Text).
6. Ambition: Sagt der Benutzer „gib dein Bestes“, wählt Claude selbst Konzept, Farbpalette und Musik aus und wird mutiger.

Fertige Struktur für einen Story-Reel: Logo/Einstieg (0–2 s) → ein Satz der Geschichte in kinetischer Schrift → eine Zahl, die auf einem Zähler wächst → Zeitleiste oder Karte → Abschlusskarte (Konto-Handle). Halte den Text auf dem Bildschirm innerhalb des Sicherheitsbereichs von Reels (oben 210 px, unten 310 px, rechts 84 px frei). Zahlen und Daten müssen belegt sein; niemals eine erfundene Zahl animieren.

Produktionsschritte

1. Schreibe den Szenenplan Sekunde für Sekunde (Tabelle: Zeit | Was ist auf dem Bildschirm | Übergang | Audio-Hit) und zeige ihn.
2. Schreibe scene.html. Regeln: feste Pixelgröße, definiere window.TOTAL (Gesamtbilder) und window.renderFrame(f); interpoliere mit Easing-Funktionen; bette Schriftarten als base64-woff2 ein (die Umgebung kann Google Fonts möglicherweise nicht erreichen) und Bilder als base64.
3. Nimm zuerst 3–4 PNG-Bilder auf und überprüfe sie selbst (überlaufender Text, falsche Schrift, leeres Bild). Führe dann den vollständigen Render-Vorgang durch.
4. Synthetisiere Musik mit audio.py; setze die Hits auf die Szenenübergänge. Wenn der Benutzer eigene Musik hochlädt, verwende diese.
5. Füge zusammen, überprüfe Länge/Auflösung mit ffprobe, überprüfe visuell ein mittleres Bild, liefere das MP4 aus.

Renderzeit: 20 s bei 60 fps dauert etwa 8–10 Minuten. Verwende 30 fps für schnelle Entwürfe, 60 fps für die endgültige Version. Nimm Überarbeitungswünsche per Zeitcode entgegen („mache den Zähler bei 0:07 langsamer“).

Vorlagen (getestet; auch als Dateien neben dieser SKILL.md ausgeliefert)

scene.html (Grundgerüst)

<!doctype html><html><head><meta charset="utf-8"><style>
html,body{margin:0;width:1080px;height:1920px;overflow:hidden;background:#0E0E10;font-family:'Montserrat',Arial,sans-serif}
#s{position:relative;width:1080px;height:1920px}
.t{position:absolute;left:90px;right:90px;color:#F5F1E8;font-weight:800;line-height:1.05}
</style></head><body><div id="s">
<div class="t" id="a" style="top:520px;font-size:120px">5,126</div>
<div class="t" id="b" style="top:680px;font-size:64px;color:#FF5A1F">FAILED PROTOTYPES</div>
</div><script>
const FPS=30,DUR=3;window.TOTAL=FPS*DUR;
const clamp=(x,a=0,b=1)=>Math.min(b,Math.max(a,x));
const easeOut=t=>1-Math.pow(1-t,3);
window.renderFrame=f=>{const t=f/FPS;
 const p=easeOut(clamp(t/0.6));a.style.opacity=p;a.style.transform=`translateY(${(1-p)*80}px)`;
 a.textContent=Math.round(5126*easeOut(clamp(t/1.5))).toLocaleString('en-US');
 const q=easeOut(clamp((t-0.8)/0.5));b.style.opacity=q;b.style.transform=`scale(${0.8+0.2*q})`;};
</script></body></html>

render.js: node render.js scene.html video.mp4 30 (falls Playwright fehlt: npm i playwright && npx playwright install chromium; falls das nicht klappt, baue die gleiche Schleife mit Python Playwright)

// node render.js scene.html out.mp4 [fps]
const {chromium}=require('playwright');const {spawn}=require('child_process');const path=require('path');
(async()=>{const [,,html,out,fpsArg]=process.argv;const fps=+(fpsArg||30);
const b=await chromium.launch();const p=await b.newPage({viewport:{width:1080,height:1920}});
await p.goto('file://'+path.resolve(html));await p.evaluate(()=>document.fonts.ready);
const total=await p.evaluate(()=>window.TOTAL);
const ff=spawn('ffmpeg',['-y','-f','image2pipe','-framerate',String(fps),'-i','-','-c:v','libx264','-pix_fmt','yuv420p','-crf','18','-preset','medium',out],{stdio:['pipe','inherit','inherit']});
for(let f=0;f<total;f++){await p.evaluate(f=>window.renderFrame(f),f);ff.stdin.write(await p.screenshot({type:'jpeg',quality:92}));}
ff.stdin.end();await new Promise(r=>ff.on('close',r));await b.close();console.log('frames',total);})();

Für 16:9 ändere den Viewport und die Seitengröße auf 1920x1080.

audio.py: python3 audio.py music.wav <seconds> (numpy-Synthese: Pad + Hits)

# python3 audio.py music.wav 3   -> synthetisiertes Pad + Hits
import sys,wave,numpy as np
out,dur=sys.argv[1],float(sys.argv[2]);sr=44100;t=np.arange(int(sr*dur))/sr
pad=sum(np.sin(2*np.pi*f*t) for f in (110,164.8,220))*0.08*np.minimum(1,t/0.5)
def hit(at,f0=60):
    x=np.zeros_like(t);m=t>=at;tt=t[m]-at;x[m]=np.sin(2*np.pi*f0*tt*(1+3*np.exp(-tt*30)))*np.exp(-tt*8)*0.6;return x
y=pad+hit(0.0)+hit(0.8,90)
y=y/np.max(np.abs(y))*0.8;fade=np.minimum(1,(dur-t)/0.4);y*=fade
w=wave.open(out,'wb');w.setnchannels(1);w.setsampwidth(2);w.setframerate(sr);w.writeframes((y*32767).astype(np.int16).tobytes());w.close()

Zusammenfügen

ffmpeg -y -i video.mp4 -i music.wav -c:v copy -c:a aac -b:a 192k -shortest final.mp4

Grenzen

• Effekte können auf Fotos angewendet werden (Partikel, Halbton, Ausschnitte); Personen können nicht animiert werden und Lippen-Synchronisation ist nicht möglich (verwende dafür ein dediziertes Avatar/Video-Modell).
• Synthetisierte Musik ist elektronisch; für echte Instrumente oder Gesang lade eine Audiodatei hoch.
• Keine urheberrechtlich geschützten Figuren oder Logos, die der Benutzer nicht besitzt. Ein echtes Firmenlogo nur im Nachrichten-/Kommentarkontext, mit Quellenangabe.

Quelle: basiert auf der Methode in Michael Lys Leitfaden „How to Generate Motion Graphics Videos with Claude“ (milleemd.com/guides/motion-graphics-videos); die Code-Vorlagen wurden für diesen Skill geschrieben.