mr0ibrahim/motion-graphics

Motion graphics studio

Les vidéos sont rendues à partir de code : une page HTML avec une fonction seek(t) pure est filmée image par image avec Playwright et encodée avec ffmpeg. Le texte, l'interface utilisateur, les graphiques, les diagrammes et les animations sont toujours codés. Les modèles d'IA fournissent les illustrations, les plans filmés et la voix (references/ai-assets.md).

Étapes de validation (ne jamais sauter ; obtenir une approbation à chaque ✋)

1. Brief : objectif, public, plateforme/format, durée, langue + dialecte, CTA, marque, VO oui/non, faits. Choisissez le genre (references/genres.md) ; il définit la structure, le preset d'énergie et l'accroche.
2. Concepts ✋ : trois idées véritablement différentes, chacune avec une ligne et son accroche. L'utilisateur en choisit une.
3. Scénario + storyboard ✋ : un tableau des scènes (un message par scène, accroche ≤ 1,5 s), la bible de style, et les assets héros (GenerateImage → cut2.py). Construisez les scènes sous forme de styleframes, puis node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…" donne html/png/pdf/json créé à partir du film lui-même (references/storyboard.md). Rien n'est animé en entier tant que le storyboard n'est pas approuvé.
4. Animatique ✋ : node scripts/render.mjs film.html checks_layout.txt --check doit donner 0 problème de mise en page, 0 signal manqué et 0 erreur de page. Ensuite, créez un brouillon sans flou en 30 ips (render_chunks.mjs film.html out_draft 30 1) avec le mix SFX, pour la révision du timing.
5. Final : render_chunks.mjs film.html out 60 4 → sfx.mjs → mix.sh → export.sh → qa.sh sur le master et le fichier social. Ensuite, regardez la planche contact et la planche de transitions (references/render-qa.md). Révisions limitées après cela : ne changez que ce qui a été demandé.

Règles strictes (chacune est une leçon tirée d'un échec réel)

1. Le grain est statique : une seule tuile avec germe dessinée une fois, jamais ré-aléatoire par image. Le test FLICKER du scan de tremblement doit être OK.
2. Pas de musique par défaut : SFX synchronisés au mouvement + VO. Musique uniquement sur demande et sous licence (references/sound.md).
3. Un seul système de mouvement : durées uniquement à partir des jetons ENERGY. Ressorts z ≥ 0,78 (dépassement ≤ 2 %), pas de secousse, pas de rebond sur le texte, arcs pour les longs mouvements, un fondu enchaîné sur chaque changement d'état (references/motion-system.md).
4. Rendu avec le rendu par morceaux (render_chunks.mjs) : un nouveau navigateur par morceau, tentatives, et reprise en ré-exécutant la même commande. Ne faites jamais un long rendu mono-processus pour des films de plus de ~20 s.
5. Transcrire correctement : align.py (large-v3, passes VAD on/off, passes d'écart, forcé sur le script) → words.json. N'utilisez jamais une seule passe whisper.
6. Les sous-titres appartiennent à leur scène : ils disparaissent et avancent avec elle et utilisent ses couleurs. Un élément est à 80 % dans son mot parlé (±2 images).
7. Style : illustré, personnages cohérents (une image de référence → chaque pose). Les vidéos explicatives techniques utilisent des visuels conceptuels (flux, diagrammes, tableaux, comparaisons, chronologies) planifiés par phrase parlée, pas de stock décoratif.
8. Deux exports : le master 60 ips + un fichier téléphone/réseau social 30 ips. Envoyez-les en pièces jointes. Un lien de téléchargement direct, un upload ou une publication uniquement avec l'accord explicite de l'utilisateur.
9. Long format (3–10 min) : planifiez des chapitres, nombre de scènes (≈ 1 par 4–7 s), un cycle de variation de rythme et une variété visuelle, une page par chapitre (references/genres.md → Long format).
10. Gardez le package séparé : scripts/, references/, templates/. Ne créez pas un seul fichier géant.

Aussi : l'arabe s'anime par mots entiers uniquement (references/arabic-rtl.md) · pas de texte généré par IA dans l'image · les produits, prix et évaluations fictifs sont étiquetés ÉCHANTILLON · les faits viennent uniquement de l'utilisateur · le héros remplit 60–70 % de l'image · ≥ 3 transitions différentes dans une publicité, jamais la même deux fois de suite (references/transitions.md) · pas de silence de plus de 1 s.

Valeurs par défaut (dites ce que vous avez choisi)

9:16 1080×1920 pour les réseaux sociaux, 16:9 pour le web/YouTube · énergie ad pour les publicités et reels, explainer pour les vidéos explicatives VO, calm pour le luxe/les longs chapitres · master 60 ips + social 30 ips · −14 LUFS, pic vrai ≤ −1,5 dBTP · SFX + VO, pas de musique · grain statique 0.06 · style illustré plat, une couleur d'accent, Noto Kufi Arabic / Cairo + Figtree.

Configuration

Tous les chemins scripts/, templates/ et references/ sont relatifs au dossier propre de ce skill (le dossier contenant ce SKILL.md, où qu'il soit installé : .claude/skills/motion-graphics, .agents/skills/motion-graphics, ~/.cursor/skills/motion-graphics, …). Appelez cela $SKILL_DIR et exécutez les scripts comme node "$SKILL_DIR/scripts/render.mjs" … depuis le dossier du projet. Exécutez npm i une fois dans $SKILL_DIR. npm i (Playwright), puis npx playwright install chromium une fois. Vous avez aussi besoin de ffmpeg/ffprobe, Python 3 avec numpy/scipy/pillow (QA, cut2), et pip install faster-whisper pour align.py.

Exemples travaillés (dans le dépôt GitHub mr0ibrahim/motion sous examples/, non copiés lors de l'installation) : demo-ar/ (une pub d'application en arabe du Golfe de 13 s : typographie cinétique RTL, personnages IA, parallaxe, poussée de caméra, zoom/push/iris/split) · demo/ (une pub ÉCHANTILLON en anglais de 10,5 s).