Communitygithub.com

emrecv/motion-graphics-director

Créez et affinez rapidement des graphiques animés Remotion et des explications visuelles avec des accroches fortes, des visuels sobres, des icônes et logos sourcés, une narration ElevenLabs et une animation précise basée sur les images. À utiliser pour des vidéos générées par code, pas pour des animations de sites web interactifs.

Qu'est-ce que motion-graphics-director ?

Cette compétence est conçue pour les créateurs de contenu vidéo et les développeurs utilisant le framework Remotion. Elle agit comme un directeur artistique spécialisé dans la production de graphiques animés et d'explications visuelles sobres, rapides et percutantes. L'objectif principal est de capter l'attention dans les trois premières secondes avec une accroche visuelle forte, d'utiliser des animations fluides et délibérées (généralement 1 à 3 secondes par temps visuel), de privilégier les espaces négatifs et une palette de couleurs neutres, et de s'appuyer sur une narration vocale (ElevenLabs par défaut) pour l'explication. La compétence automatise la configuration d'un projet Remotion, applique des règles strictes sur l'utilisation des animations (basées sur les numéros d'image, sans CSS autonome ni horloge murale), et guide l'utilisateur à travers un processus de production en plusieurs étapes, de l'extraction du brief à la livraison finale. Elle est prise en charge par les plateformes et outils qui intègrent des compétences personnalisées pour les agents IA (comme Claude Code, Cursor, ou Codex). Le flux de travail inclut l'inspection du projet existant, l'écriture de la voix et le sourçage des assets, la construction des premiers plans, et une phase de révision rigoureuse avant rendu final.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emrecv/motion-graphics-director/tree/HEAD/skills/motion-graphics-director

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

directeur de graphiques animés

Rendez le mécanisme ou l'idée immédiatement intéressants. Le profil créatif par défaut ci-dessous reflète les préférences du créateur ; un brief de projet explicite de l'utilisateur peut le remplacer. Le succès technique seul n'est pas un succès visuel.

Valeurs par défaut créatives

  • Accroche dans les trois premières secondes. Ouvrez sur un contraste visuel surprenant, un problème reconnaissable, une transformation ou un résultat concret. Commencez l'action immédiatement. Pas de carton de titre d'introduction, de pré-roll de logo ou d'explication lente avant l'accroche. Testez les 90 premières images à 30 ips par elles-mêmes.
  • Mouvement rapide et propre avec un easing délibéré. Commencez par des temps visuels de 1 à 3 secondes et des mouvements principaux de 8 à 18 images à 30 ips ; adaptez-vous à la narration et à la compréhension. Ce sont des fourchettes de départ, pas des coupes obligatoires. Faites avancer la pensée plutôt que de maintenir une scène terminée. Gardez les séquences causales compréhensibles.
  • Un seul point focal et un espace négatif généreux. L'espace blanc signifie une marge de manœuvre, y compris sur des fonds sombres. Utilisez des couleurs neutres ou atténuées, pas de néon ou de lueur, pas de bordures décoratives ou de cartes avec contours. Utilisez des coins arrondis modestes, environ 12 à 24 px sur des panneaux moyens à une largeur de 1080 px ; gardez-les proportionnels.
  • La narration porte l'explication. Anglais par défaut, avec voix off ElevenLabs. Évitez les gros titres, les paragraphes, les sous-titres de routine, les compteurs d'étapes, les étiquettes de chapitre, les barres de progression, les en-têtes de marque décoratifs et les superpositions d'avertissement/avis. Un bref titre de 1 à 4 mots ou une courte étiquette est autorisé lorsque cela aide à identifier la chose en mouvement. Gardez les sources, les mises en garde et les notes de mise en œuvre dans les documents de livraison ; rendez la narration précise sans encombrer le cadre. Fournissez des sous-titres séparés uniquement sur demande.
  • Utilisez des assets conçus. Obtenez des icônes modernes et propres d'un pack cohérent et des logos de produits réels pertinents provenant de ressources de marque officielles. N'inventez pas d'icônes SVG de substitution génériques ou de faux logos. Faites correspondre la taille optique, l'épaisseur du trait et le style. Consultez icons-and-logos.md.
  • Pas de musique de fond. Utilisez la voix plus des effets sonores sélectifs. Les effets marquent des événements significatifs et doivent rester en dessous de la parole. Bencho n'est pas une dépendance et ses assets ne sont pas inclus.

Travaillez à partir du projet

Inspectez les sources existantes, les assets, les scripts, les dépendances verrouillées et les décisions antérieures. Pour un nouveau projet Remotion, exécutez python3 <skill>/scripts/new_project.py <new-directory> puis npm ci à cet endroit. Le projet inclus fournit des aides de rendu et de médias testées. Ses compositions FORM et CDN sont des exemples techniques hérités, pas des exemples de direction artistique actuels : ne copiez pas leurs longs plans, titres, étiquettes, couleurs ou dessins d'icônes dans de nouveaux films.

Gardez le contenu, les tokens visuels, la narration, les assets et le timing modifiables séparément. Utilisez des médias locaux et des polices chargées pour le rendu final. Consultez les compétences officielles Remotion pour les API inconnues et faites correspondre la version installée plutôt que de mettre à niveau silencieusement.

Production

  1. Extrayez le public, un seul point à retenir, la plateforme, la durée, les références, les assets, la langue et la voix. Par défaut : 1080 × 1920, 30 ips, environ 20 secondes. Ne demandez que les informations manquantes matériellement.
  2. Écrivez l'image d'ouverture et la première phrase parlée ensemble. Planifiez une courte liste de plans causaux avec des temps de longueur variable. Lisez art-direction.md ; pour les explications de processus, lisez également technical-explainers.md. Vérifiez les affirmations techniques par rapport aux sources primaires.
  3. Lorsque le style est ouvert, montrez deux directions vraiment différentes avec des styleframes représentatifs. Si l'utilisateur a déjà choisi le look, procédez. N'introduisez pas de points d'approbation de routine.
  4. Écrivez un script vocal concis, sourcez les assets et suivez audio.md. Générez ou importez la narration ElevenLabs approuvée avant de verrouiller le montage. Si l'accès ou la sélection de voix manque, préparez le script et l'animatique ; identifiez clairement le timing de l'espace réservé et n'inventez pas une narration terminée.
  5. Construisez les 3 premières secondes et une transition représentative. Utilisez motion-and-remotion.md. Étendez le film une fois que l'accroche et le mouvement fonctionnent. Corrigez les scènes affectées plutôt que de tout rendre à plusieurs reprises.
  6. Révisez avec review.md : accroche d'ouverture, rythme, clarté causale, composition sobre, alignement de la parole, effets sélectifs, pas de musique. Rendez un aperçu en pleine fréquence d'images avant le MP4 final.

Invariants de mise en œuvre

Dérivez l'animation des numéros d'image, y compris l'easing et les enveloppes audio. Pas d'animation CSS autonome, de minuteurs d'horloge murale ou d'aléatoire non initialisé. Le rendu d'image indépendant et le défilement doivent concorder. Attendez les polices et les assets réels. Mesurez le texte avec les polices chargées ; recomposez le texte long au lieu de le réduire sans discernement.

Rapide ne signifie pas abrupt, et l'easing ne signifie pas rebond. Utilisez une accélération contrôlée et un ajustement, des chevauchements coordonnés et des coupes directes là où c'est utile. Ne prétendez jamais avoir regardé ou entendu une exportation en vous basant uniquement sur des images fixes ou des mesures de crête.

Livrez et améliorez

Livrez une vidéo lisible, un projet modifiable, une provenance des assets et un enregistrement concis des vérifications réelles. Gardez la documentation hors de la vidéo elle-même. Pour les changements de compétence, utilisez evaluation.md ; améliorez les règles à partir des échecs observés plutôt que de prétendre à une qualité ou une vitesse garantie.

Skills associés