Aller au guide d’utilisation
motion-graphicspar HeyGen

Motion Graphics Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : motion graphics courts orientés design : typographie cinétique, compteurs de statistiques, stings de logo, bandeaux incrustés.

  • Mouvement et vidéo
  • Video
heygen-com/hyperframes · skills/motion-graphics/SKILL.mdSKILL.md
--- name: motion-graphics description: A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up … --- ## Categories — split by the search decision ## Prerequisites ## Flow ## Resume table ## Design notes (maintainers — execution does not read this)
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 15 566 caractères au total

01 Ce qu'il fait

Ce que fait le Skill motion-graphics dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill orienté routage pour un seul motion graphic court, piloté par le design et sans narration — typographie cinétique, comptage de statistique, impact de graphique, sting de logo, bandeau, carte animée, tweet ou page web — généralement de moins de 10s et pas plus d'environ 30s, rendu en MP4 ou en overlay transparent.

Il est d'abord orienté assets et réutilisation : le premier embranchement consiste à déterminer si la pièce nécessite une recherche ; les catégories de formulaire s'exécutent sur le contenu fourni par l'utilisateur avec asset_needs vide, les catégories pilotées par la recherche animent selon le type de contenu renvoyé, et le Builder compose des blocs du catalogue avant de rédiger manuellement les manques. Le workflow est autonome avec au plus une question de clarification, mais le rendu reste conditionné à la validation de l'utilisateur, en aval du lint, du check et des instantanés de preuve.

Ce qu'il produit

  • Un shot-plan.json provisoire puis final contenant l'enveloppe, la catégorie ou l'intention de recherche choisie, asset_needs ainsi que le bloc, la mise en page, le mouvement et les positions.
  • compositions/index.html respectant le contrat HF avec une timeline GSAP en pause sur window.__timelines, des classes de découpe et des identifiants stables, et un tl.seek(0) déterministe.
  • Une feuille de contact ou d'instantanés sous snapshots/ pour inspecter les temps de preuve.
  • renders/video.mp4, ou un overlay transparent lors d'un rendu au format webm ou mov.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Initialiser le Projet

    L'étape 0 crée PROJECT_DIR = videos/<project-name>/ et exécute hyperframes init avec l'exemple vierge et ce skill, en la sautant entièrement lorsque hyperframes.json existe déjà.

  2. 02
    Planifier et Décider de la Recherche

    Le premier embranchement consiste à déterminer si la pièce nécessite une recherche : non signifie une catégorie de formulaire avec asset_needs: [], oui signifie l'émission de requêtes de recherche dans asset_needs[].

  3. 03
    Sourcer les Assets si Nécessaire

    L'étape 2 résout les assets via media-use en chemins locaux au projet figés plus un registre, et est sautée directement au design lorsque asset_needs est vide.

  4. 04
    Concevoir à Partir de ce que Vous Avez

    Une seconde passe du Director choisit des blocs du catalogue et des règles et blueprints hyperframes-animation autour des assets résolus, puis finalise le shot plan.

  5. 05
    Composer en priorisant la réutilisation

    Le Builder ajoute des blocs du catalogue avec npx hyperframes add et les personnalise sur place, en rédigeant manuellement seulement les manques et l'affordance d'asset-fusion pour produire compositions/index.html.

  6. 06
    Prendre des Instantanés de Preuve

    Choisissez des temps de preuve qui montrent l'état d'ouverture, le mouvement signature et la tenue finale, puis inspectez la feuille de contact ou d'instantanés générée.

02 Trouvez celui qui vous convient

Quand utiliser le skill motion-graphics

Utilisez le skill motion-graphics dans Claude Code ou Codex lorsque le travail concerne le motion et la vidéo de ce type. Les cas d'usage et limites ci-dessous proviennent du fichier propre du skill.

Bon choix

  • Une phrase percutante, une citation ou un titre où le mouvement du texte est toute l'idée.
  • Un chiffre héros unique avec un compteur animé et un anneau.
  • Un sting de logo ou une composition de marque construite à partir du logo de l'utilisateur.
  • Un mouvement géographique tel que la mise en évidence de régions, la connexion de lieux ou un zoom vers un emplacement.
  • Des traitements animés de tweet, d'article de presse ou de titre lorsqu'une recherche fournit le contenu source.

Connaître les limites

  • Les pièces plus longues, narrées ou à scènes multiples sont dirigées ailleurs.
  • Tout ce qui comporte une narration ou un sujet en prise de vue réelle, ou qui dépasse largement la fenêtre du format court.
  • Les catégories pilotées par la recherche perdent leurs ressources trouvées lorsqu'un fournisseur est indisponible, avec repli sur le mode sans ressource.
  • Piloter Figma via des outils MCP bruts contourne la désinfection, la provenance et la liaison des tokens de marque, cette voie est donc exclue.

Quoi fournir

  • Le contenu lui-mêmele kinetic-type, les statistiques, les graphiques, la révélation de logo et les bandeaux de titre reçoivent un contenu fourni par l'utilisateur, si bien que la ligne, le chiffre, la donnée ou le logo proviennent de vous plutôt que d'une recherche.
  • Une URL figma.com, si c'est là que se trouve la ressourceExécutez d'abord /figma pour l'export des ressources, les tokens de marque et la traduction de Motion vers GSAP, puis construisez à partir de son résultat.
  • Clés optionnelles pour la recherche de ressourcesGEMINI_API_KEY ou GOOGLE_API_KEY pour la génération d'images, ainsi que asset_scout et les fournisseurs de recherche pour la recherche de ressources réelles sur les pages web, actualités, tweets et la fusion de ressources.

03 Dans le skill

Règles que le skill de motion-graphics donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Router via /hyperframes

    La porte d'entrée est /hyperframes ; ce skill ne crée qu'un motion graphic court, conçu avec soin et sans narration, en général sous 10s, sans voix off ni sujet en prise de vue réelle.

  2. Une question, puis construire

    Le workflow est autonome par conception : au plus une question de clarification issue de agents/director.md, puis il construit jusqu'à la vérification sans révision intermédiaire.

  3. Confirmer avant de rafraîchir le skill

    Demandez à l'utilisateur avant d'exécuter la commande de mise à jour ; c'est un no-op rapide lorsqu'elle est à jour, sinon elle rafraîchit ce skill ainsi que les skills de domaine principaux dont il dépend.

  4. Le rendu est soumis à l'utilisateur

    Une fois les vérifications et les instantanés de preuve validés, posez d'abord la question du preview canonique ou du rendu, et ne rendez qu'après une réponse explicite de rendu.

  5. Ne jamais initialiser à la racine de l'espace de travail

    N'exécutez jamais hyperframes init à la racine de l'espace de travail, et n'imbriquez jamais un autre répertoire hyperframes/ à l'intérieur de PROJECT_DIR.

  6. Chaque commande dans un sous-shell

    Chaque commande Bash, qu'elle soit émise par le flux principal ou par un sous-agent, est un sous-shell (cd "$PROJECT_DIR" && ...) ; un cd nu n'est pas autorisé.

  7. Dériver le nom du projet

    Utilisez le répertoire fourni par l'utilisateur, sinon un nom court en kebab-case dérivé de l'intention, de la forme <subject>-motion ; jamais le nom de base de l'espace de travail ni un horodatage.

  8. Ne pas masquer un défaut par le minutage

    Lorsqu'une passerelle échoue, ne modifiez jamais une durée fixe simplement pour masquer le défaut ; réparez plutôt la composition sur place.

04 Mettez-le en pratique

Installer motion-graphics dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter motion-graphics à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

Forme générique de la CLI skills pour skills/motion-graphics/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Make a short motion graphic, about 8 seconds, from [our launch tagline] — kinetic type, motion-first, no narration, using the kinetic-type category and the caption blocks. Then close with a logo sting built from [our logo.svg], and render it to MP4.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Exécutez le lint et la vérification sur le projet avant toute autre chose ; les deux s'exécutent comme des sous-shells depuis PROJECT_DIR.
  • Inspectez la feuille de contact ou d'aperçu générée avant de poursuivre.
  • En cas d'échec du lint, de la vérification ou de l'aperçu, envoyez le sous-agent de réparation pour une passe de correction sur place puis relancez la passerelle en échec.
  • Confirmez que le rendu existe, n'est pas vide et a la durée prévue, et que la remise indique le nom de l'artefact, la durée, l'identifiant de trame et les temps de preuve.

Dans OpenDesign, importez motion-graphics depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Branche main
Fichier du skill
skills/motion-graphics/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 558c11b
License
Apache-2.0 Depuis LICENSE.
Étoiles du dépôt
49 761 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt heygen-com/hyperframes, qui contient 9 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour motion-graphics.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. motion-graphics — point d'entrée de répartitionPrécise la porte d'entrée, le flux autonome, le répertoire du projet et le tableau des phases de l'initialisation au rendu.
  2. Catégories — réparties selon la décision de rechercheListe les catégories de formulaire ne nécessitant aucune recherche et les catégories pilotées par la recherche, choisies selon le contenu retourné.
  3. PrérequisPlateforme, outils système, variable d'environnement GPU macOS, clés API optionnelles et leurs repli locaux.
  4. FluxÉtapes 0 à 6 : initialiser, planifier, source, concevoir, construire, vérifier, approuver, rendre.
  5. Tableau de repriseL'étape à partir de laquelle reprendre pour chaque état partiel de projet.
  6. Notes de conception (mainteneurs — l'exécution ne lit pas ceci)Justification centrée sur les ressources, mise en correspondance axée sur la réutilisation, contrat du module de catégorie, forme du répertoire et enregistrement du routeur.
Description du skill lui-même
« Un motion graphic court et orienté design où le mouvement est le message — typographie cinétique, comptage de statistiques, visualisation de données/graphique animé, sting de logo/lockup de marque, bandeau inférieur/légende/overlay social, carte animée (mise en évidence de régions, connexion de lieux, zoom sur un emplacement), tweet animé/article de presse/titre, animation de page web/UI (scroll, curseur, légendes), ou fusion de la géométrie d'une image réelle dans un graphique. Généralement moins de 10s (jusqu'à ~30s), sans narration ni sujet en prise de vue réelle ; rendu en MP4 ou overlay transparent. Plus long/narré/multi-scènes → /general-video. Flou → /hyperframes. »

Description front-matter issue de SKILL.md. Le fichier complet fait environ 15 566 caractères. Lire le fichier complet sur GitHub.

Motion Graphics

Exécuter motion-graphics sur une tâche réelle de motion et vidéo.

Téléchargez OpenDesign, importez motion-graphics depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows