Communitygithub.com

yanjigb/article-to-motion-graphics

Transformez un article ou une URL en vidéo motion graphics verticale avec typographie cinétique, diagrammes de données, voix-off naturelle et musique de fond. Idéal pour convertir des articles de blog, études de cas, recherches ou pages de landing en vidéos sociales 9:16.

Qu'est-ce que article-to-motion-graphics ?

Cette compétence permet de créer des vidéos verticales de type explainer à partir d'un article, en mettant l'accent sur des informations claires, une typographie lisible et une voix-off à vitesse naturelle. Elle est particulièrement utile pour les créateurs de contenu, marketeurs et développeurs qui souhaitent transformer rapidement du contenu textuel (articles de blog, études de cas, pages de vente) en vidéos engageantes pour les réseaux sociaux (9:16). Le processus automatisé couvre l'analyse de l'article, la création d'un storyboard structuré, la génération de graphiques animés, la synthèse vocale, la composition musicale, le mixage audio et la validation finale. La compétence prend en charge les plateformes d'agents AI comme Claude Code, Cursor, Codex et utilise des outils externes tels que FFmpeg pour le mixage audio et des templates de storyboard. Elle garantit une qualité professionnelle en respectant des règles de lisibilité, de sécurité des textes et de cohérence audio, sans jamais couper la voix-off prématurément ni utiliser de séquences filmées sans accord.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yanjigb/article-to-motion-video-claude-skills/tree/HEAD

Demander à votre IA préférée

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

Documentation

Article to motion graphics

Créez une vidéo verticale de type explainer à partir d'un article, en privilégiant des informations claires, une typographie facile à lire et une voix-off à vitesse naturelle. N'utilisez pas automatiquement des séquences filmées avec de vraies personnes si l'utilisateur demande uniquement des motion graphics.

Processus obligatoire

  1. Définir le brief. Enregistrez l'URL ou le texte source, la langue de lecture, le ratio d'affichage, la plateforme, la durée souhaitée et si une voix-off et/ou une musique de fond sont nécessaires. Valeurs par défaut : 9:16, 1080×1920, motion graphics plein écran, voix-off dans la langue de l'article, musique instrumentale légère.
  2. Lire la source. Si une URL est fournie, lisez le contenu de l'article via le processus de recherche/récupération approprié. Extrayez les chiffres, les arguments principaux et les conclusions ; n'interprétez pas les données. Utilisez l'article source comme citation dans le storyboard ou la carte de fin si approprié.
  3. Rédiger un storyboard court. Divisez l'article en 6 à 10 états d'information. Chaque état doit comprendre : une durée estimée, un message principal, le texte affiché, la forme du mouvement et la phrase de voix-off correspondante. Gardez un point focal à chaque instant ; évitez d'entasser plusieurs phrases sur un même écran.
  4. Choisir la durée en fonction de la voix-off. Rédigez un script de parole naturelle, sans style dissertation. Estimez 135–165 mots par minute ; si le script est plus long que la vidéo, privilégiez l'allongement de la vidéo ou la réduction du script, n'augmentez pas la vitesse au-delà de 1.1× sauf demande explicite de l'utilisateur. La voix-off doit se terminer par une phrase complète, sans coupure brutale à la fin de la vidéo.
  5. Créer les motion graphics. Générez des arrière-plans, grilles, formes, compteurs, barres, entonnoirs, diagrammes réseau ou maquettes d'interface utilisateur avec un code autonome. Utilisez une police de secours locale compatible Unicode. Gardez le texte dans la zone de sécurité, avec une taille de police suffisante pour une lecture sur écran de téléphone, et placez la citation / carte de fin à la fin.
  6. Générer la voix-off. Avant d'appeler l'outil de synthèse vocale, lisez tts-prompter. Utilisez une voix cohérente, un language_code correct pour la langue, et turns[].text ne doit contenir que les paroles à prononcer. Placez les instructions vocales dans turns[].style ; n'incluez pas d'indications de mise en scène ni d'étiquettes de locuteur dans le texte.
  7. Créer la musique de fond. Avant d'appeler l'outil musical, lisez music-prompter. Pour une vidéo avec narration, demandez Instrumental only, no vocals, un arrangement aéré, sans mélodie principale qui couvre la voix. Générez une piste suffisamment longue pour permettre la boucle/découpe, ne la fragmentez pas si la vidéo fait moins de 180 secondes.
  8. Mixer l'audio. Utilisez FFmpeg pour couper/mettre en boucle la musique à la durée exacte de la vidéo, maintenez la voix-off à vitesse naturelle, réduisez la musique de fond d'environ 12–20 % par rapport à la voix, puis utilisez amix et alimiter. Si la voix est plus longue que la vidéo, rendez la vidéo à la durée de la voix ou ajustez le storyboard ; ne coupez pas la narration silencieusement.
  9. Vérifier. Utilisez ffprobe pour confirmer les dimensions, la durée, la fréquence d'images, le codec et le flux audio. Extrayez au moins la première image, une image au milieu de chaque groupe de scènes et la dernière image ; vérifiez que le texte n'est pas coupé, que l'animation présente une pause de lecture, que la voix se termine par une phrase complète et que la musique ne couvre pas les paroles.
  10. Livrer. Envoyez d'abord le fichier MP4 complet. Si un fichier source réutilisable a été créé, envoyez également le script source. Indiquez clairement la résolution, le ratio, la durée, la fréquence d'images, la langue de la voix-off et l'état de l'audio.

Valeurs créatives par défaut

  • Style : fond bleu marine/charcoal, grille subtile, accent cyan/bleu/orange, typographie en gras, mouvements propres et intentionnels.
  • Structure sociale : accroche dans les 1–2 premières secondes ; ensuite des chiffres ou un processus ; finir par un point clé et la source.
  • Chaque scène comporte une entrée, une pause de lecture et une sortie/transition. N'enchaînez pas plusieurs animations non liées simultanément.
  • Privilégiez l'anglais si la source est en anglais ; conservez les termes techniques tels que DR, dofollow, SaaS si nécessaire.
  • N'inventez pas de logo, marque, chiffre ou citation. Si un asset de marque précis est nécessaire, demandez-le ou utilisez un asset fourni.

Exemple de storyboard

Scene 1 — Accroche (0:00–0:05)
Visuel : grand chiffre et flèche de conversion.
Texte à l'écran : "463 testés → 22 valables"
VO : une phrase courte présentant la contradiction principale.

Scene 2 — Méthode (0:05–0:12)
Visuel : entonnoir/compteurs.
Texte à l'écran : les étapes d'entrée et après dédup.
VO : explication de la création de la liste.

Scene 3 — Filtre (0:12–0:22)
Visuel : graphique à barres ou cartes pour les groupes éliminés.
VO : ne citer que les groupes les plus importants.

Final — Point clé (fin de vidéo)
Visuel : grande phrase de conclusion, source citation en petit en dessous.
VO : conclusion et action recommandée.

Ressources associées

  • Utilisez templates/storyboard_prompt_template.md pour créer un storyboard et un prompt standardisé en anglais pour les outils d'IA image/vidéo. Le template exige un timecode, le texte exact à l'écran, la voix-off, le mouvement, la continuité et le contrôle qualité.
  • Consultez examples/saas-demand-generation-flywheel.md pour un storyboard/prompt complet basé sur une étude de cas SaaS avec chiffres, réserves et citation.
  • Utilisez scripts/mix_video_audio.sh pour boucler/couper la musique, réduire le volume de fond, mixer avec la narration et vérifier la sortie. Exécutez bash scripts/mix_video_audio.sh --help avant utilisation.

Skills associés