hyperframes-animationpar HeyGen

HyperFrames Animation Skill.

Un skill Claude Code et Codex pour le mouvement et la vidéo : règles d'animation, blueprints de scène, transitions et adaptateurs runtime pour HyperFrames.

Mouvement et vidéo
Video

Télécharger OpenDesign Voir le guide d'utilisation

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 7 755 caractères au total

01 Ce qu'il fait

Ce que fait le skill hyperframes-animation 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

Fournit toutes les connaissances d'animation pour HyperFrames : règles de mouvement atomiques, plans de scène multi-phases, transitions de scène, techniques de motion design et sept adaptateurs d'exécution (GSAP par défaut, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Les utilisateurs choisissent 2 à 4 règles atomiques et les composent avec une seule timeline GSAP en pause, ou chargent un plan multi-phases pour une chorégraphie complexe en 4-5 phases, ou consultent les API spécifiques à un runtime.

Couvre également l'audit des compositions existantes via animation-map.mjs et 24 effets d'animation de texte nommés. GSAP est la valeur par défaut pour 95 % du travail de mouvement, couvrant l'orchestration de timeline, les transformations, l'easing et le stagger. Tout est natif à HyperFrames : une seule timeline en pause, seek-safe, déterministe.

Ce qu'il produit

animation-map.json contenant les données d'audit de chorégraphie avec zones mortes, cohérence du stagger et avertissements de cycle de vie

Voir l'exemple de prompt ↗

Fonctionnement

01
Choisir et composer des règles atomiques
Sélectionnez 2 à 4 règles dans rules-index.md et assemblez-les avec une seule timeline GSAP en pause. Il s'agit du workflow par défaut, plus rapide que de partir d'un blueprint.
02
Charger un blueprint pour des scènes multi-phases
Lorsque la scène correspond à un modèle prédéfini existant comme brand-reveal ou social-proof, chargez sa recette depuis blueprints-index.md pour réutiliser son pipeline de phases.
03
Consulter les API spécifiques à un runtime
Utilisez la table de routage pour trouver les eases et contrôles de timeline GSAP, les méthodes du lecteur Lottie, les API du mixer Three.js, ou toute autre documentation spécifique à un runtime selon les besoins.
04
Auditer la chorégraphie avec animation-map
Exécutez animation-map.mjs pour lire chaque timeline GSAP, énumérer les tweens, échantillonner les bboxes, calculer les indicateurs et générer animation-map.json afin d'auditer les zones mortes et la cohérence du stagger.

02 Trouvez celui qui vous convient

Quand utiliser le skill hyperframes-animation

Utilisez le skill hyperframes-animation dans Claude Code ou Codex lorsque le travail concerne le motion design et la vidéo de ce type. Les capacités et limites ci-dessous proviennent du fichier du skill lui-même.

Bon choix

Motifs de mouvement atomiques sélectionnés par déclencheur ou tag depuis rules-index.md
Transitions de scène pilotées par CSS entre deux clips
Scènes 3D, mouvement de caméra et visuels pilotés par shader avec Three.js
Canevas rendus par GPU avec particules, verre liquide ou shaders personnalisés via TypeGPU

Connaître les limites

Animer la largeur, la hauteur, le haut ou la gauche pour des changements de mise en page

Quoi fournir

Répertoire de compositionIndiquez le chemin de votre répertoire de composition lors de l'exécution d'animation-map.mjs pour auditer la chorégraphie.
ID de blueprintLorsque votre scène correspond à un modèle multi-phases, indiquez l'ID du blueprint depuis blueprints-index.md pour charger sa recette complète.

03 Dans le skill

Règles que le skill hyperframes-animation donne à Claude Code et Codex

7 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.

Précalculer les constantes de mise en page
Ne dérivez jamais les positions à partir de getBoundingClientRect au moment du tween.
Le Mouvement Spatial N'utilise Que les Alias de Transformation GSAP
Utilisez x, y, scale, rotation pour tous les mouvements spatiaux. N'animez jamais width, height, top ou left pour les changements de mise en page.
GSAP est le Runtime par Défaut
GSAP est le choix par défaut pour 95% du travail de mouvement, couvrant l'orchestration de timeline, les transformations, l'easing et le stagger. Toutes les règles atomiques de ce skill sont basées sur GSAP.
Composez des Règles Atomiques par Défaut
Choisissez 2 à 4 règles dans rules-index.md et composez-les. C'est plus rapide et produit moins de code que de partir d'un blueprint.
Plusieurs Runtimes Peuvent Coexister
Plusieurs runtimes peuvent coexister dans une composition. Chacun enregistre ses instances sur le global spécifique au runtime afin que HyperFrames puisse tous les parcourir en un seul passage.
Ne Lisez Pas les Blueprints de Manière Spéculative
Ne lisez pas un fichier blueprint de manière spéculative ; chargez-le uniquement lorsque vous avez déjà décidé que vous avez besoin d'une orchestration au niveau de la scène.
Les Propriétés Non Spatiales Sont Autorisées
La liste blanche permet les tweens de propriétés non spatiales opacity, color, backgroundColor et borderRadius, mais jamais width, height, top ou left pour les changements de mise en page.

04 Mettez-le en pratique

Installer hyperframes-animation 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 hyperframes-animation à 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 hyperframes-animation

Forme générique de la CLI skills pour skills/hyperframes-animation/SKILL.md ; le repository 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

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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 :

Vérifiez que toutes les instances de runtime sont enregistrées sur leurs globales spécifiques au runtime afin que HyperFrames puisse les parcourir en une seule passe

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

Télécharger OpenDesign Lire le démarrage rapide

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/hyperframes-animation/SKILL.md Checksum du contenu enregistré 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. Ce n'est pas une note ni un compteur d'utilisation pour hyperframes-animation.
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

Par défaut : composer des règles atomiquesChoisissez 2 à 4 règles dans rules-index.md et composez avec une timeline GSAP, plus rapide que les blueprints
Chargez un blueprint quandÀ utiliser quand la scène correspond à un template multi-phases ou nécessite une chorégraphie exécutable de 4-5 phases
RoutageTable associant les tâches aux fichiers : rules, blueprints, transitions, techniques, adapters, scripts
Choisir un runtimeQuand utiliser GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
Contraintes CritiquesConstantes de mise en page précalculées, alias de transformation GSAP uniquement, pas de tweens width/height/top/left
ScriptsExécutez animation-map.mjs pour auditer la chorégraphie et générer animation-map.json
Voir AussiLiens vers hyperframes-core, hyperframes-creative, hyperframes-cli

Description du skill lui-même

Toutes les connaissances d'animation pour HyperFrames : règles de mouvement atomiques, plans de scènes multi-phases, transitions entre scènes, techniques de motion design élargies, ET les sept adaptateurs d'exécution (GSAP par défaut, plus Lottie, Three.js, Anime.js, keyframes CSS, Web Animations API, TypeGPU). À utiliser pour toute tâche de mouvement ou d'animation : choisissez 2 à 4 règles et composez, ou chargez un plan, ou consultez l'API spécifique à l'exécution (par exemple eases GSAP / lecteur Lottie / mixer Three.js). Couvre également l'audit de la chorégraphie (carte d'animation) d'une composition existante et 24 effets d'animation de texte nommés. Natif HyperFrames : timeline unique en pause, résistant au seek, déterministe.

Description en front-matter provenant de SKILL.md. Le fichier complet fait environ 7 755 caractères. Lire le fichier complet sur GitHub.

HyperFrames Animation

Exécuter hyperframes-animation sur une vraie tâche de motion design et vidéo.

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

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Ce que fait le skill hyperframes-animation dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill hyperframes-animation

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill hyperframes-animation donne à Claude Code et Codex

Précalculer les constantes de mise en page

Le Mouvement Spatial N'utilise Que les Alias de Transformation GSAP

GSAP est le Runtime par Défaut

Composez des Règles Atomiques par Défaut

Plusieurs Runtimes Peuvent Coexister

Ne Lisez Pas les Blueprints de Manière Spéculative

Les Propriétés Non Spatiales Sont Autorisées