erencalik/motion-graphics-video-generator-claude

Motion Graphics Video

Produit une vidéo MP4 de bout en bout dans l'environnement de code de Claude, sans logiciel de montage ni séquence préenregistrée. Nécessite l'exécution de code et la création de fichiers (sur claude.ai : Paramètres > Capacités). Pour une vidéo de marque, téléchargez le logo, des photos, les couleurs et les polices, ou indiquez un fichier de style de marque. Répondez dans la langue de l'utilisateur.

Comment ça marche

1. L'animation est écrite dans une seule page HTML. La position, la taille, la couleur et l'opacité de chaque élément sont calculées à partir du numéro d'image (window.renderFrame(f)) ; pas de transitions CSS, setTimeout ou requestAnimationFrame. Cela rend le rendu déterministe.
2. Chrome headless (Playwright) capture chaque image. 20 s × 60 ips = 1 200 images.
3. ffmpeg transforme les images en MP4 (H.264, yuv420p).
4. La musique est synthétisée dans le code, synchronisée avec les transitions, et ajoutée à la vidéo.

Liste de vérification pour la demande (demander une fois ce qui manque)

1. Durée : 15–20 s est idéal.
2. Format : 9:16 (1080x1920) pour Reels/TikTok/Shorts, 16:9 (1920x1080) pour YouTube/portfolio.
3. Matériel source : un site web, des photos téléchargées, un logo, ou rien.
4. Style : nommez la technique : typographie cinétique, infographie/statistiques animées, particules, demi-teintes, carte/topographie, compteur, timeline. Une technique nommée donne des résultats plus fiables.
5. Règles et exclusions : couleurs à respecter, éléments à omettre (ex. prix, texte supplémentaire).
6. Ambition : si l'utilisateur dit "fait de ton mieux", Claude choisit le concept, la palette et la musique lui-même et devient plus audacieux.

Structure prête à l'emploi pour un Reel narratif : logo/accroche d'introduction (0–2 s) → phrase narrative en typographie cinétique → un nombre qui croît sur un compteur → timeline ou carte → carte de fin (pseudo du compte). Gardez le texte à l'écran dans la zone de sécurité des Reels (210 px en haut, 310 px en bas, 84 px sur les côtés dégagés). Les chiffres et les dates doivent être sourcés ; n'animez jamais un nombre inventé.

Étapes de production

1. Écrivez le plan scène par scène (tableau : temps | ce qui est à l'écran | transition | impact audio) et montrez-le.
2. Écrivez scene.html. Règles : taille en pixels fixes, définissez window.TOTAL (nombre total d'images) et window.renderFrame(f) ; interpolez avec des fonctions d'assouplissement ; incorporez les polices en base64 woff2 (l'environnement peut ne pas atteindre Google Fonts) et les images en base64.
3. Capturez d'abord 3–4 images PNG et inspectez-les vous-même (texte débordant, mauvaise police, image vide). Ensuite, effectuez le rendu complet.
4. Synthétisez la musique avec audio.py ; placez les impacts sur les transitions de scène. Si l'utilisateur télécharge sa propre musique, utilisez-la.
5. Assemblez, vérifiez la durée/résolution avec ffprobe, vérifiez visuellement une image du milieu, livrez le MP4.

Temps de rendu : 20 s à 60 ips prend environ 8–10 minutes. Utilisez 30 ips pour les brouillons rapides, 60 ips pour la version finale. Acceptez les demandes de révision par timecode ("ralentissez le compteur à 0:07").

Modèles (testés ; également fournis sous forme de fichiers à côté de ce SKILL.md)

scene.html (squelette)

<!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 (si Playwright est manquant : npm i playwright && npx playwright install chromium ; à défaut, construisez la même boucle avec 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);})();

Pour le 16:9, changez la fenêtre et la taille de la page en 1920x1080.

audio.py : python3 audio.py music.wav <secondes> (synthèse numpy : nappe + impacts)

# python3 audio.py music.wav 3   -> nappe synthétisée + impacts
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()

Assemblage

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

Limites

• Des effets peuvent être appliqués aux photos (particules, demi-teintes, découpes) ; les personnes ne peuvent pas être animées et le synchronisme labial n'est pas possible (utilisez un modèle dédié d'avatar/vidéo pour cela).
• La musique synthétisée est électronique ; pour des instruments réels ou des voix, téléchargez un fichier audio.
• Pas de personnages sous droits d'auteur ni de logos que l'utilisateur ne possède pas. Un logo d'entreprise réel uniquement dans un contexte d'actualité/commentaire, avec sa source.

Crédit : basé sur la méthode du guide de Michael Ly "How to Generate Motion Graphics Videos with Claude" (milleemd.com/guides/motion-graphics-videos) ; les modèles de code ont été écrits pour ce skill.