Installation du plugin : Avant les commandes de configuration ou de fraîcheur, suivez les règles d'exécution du plugin lorsque cette compétence se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Animation HyperFrames
Toute la connaissance du mouvement en une seule compétence : règles (recettes atomiques), blueprints (modèles de scène multi-phases), transitions (de scène à scène), techniques (motifs plus larges de motion design) et adaptateurs (API par runtime).
Pour le contrat de composition (attributs de données, sous-compositions, déterminisme), voir hyperframes-core.
Par défaut : composer des règles atomiques
Choisissez 2 à 4 règles dans rules-index.md, assemblez-les avec une seule timeline GSAP en pause, c'est terminé. C'est plus rapide et produit moins de code que de partir d'un blueprint.
Charger un blueprint lorsque
- La scène correspond à un modèle multi-phase pré-conçu existant (révélation de marque, preuve sociale, etc.) et la réutilisation de son pipeline de phases permet d'économiser du temps de création.
- Vous voulez un code de référence exécutable pour une chorégraphie complexe de 4 à 5 phases.
Les blueprints se trouvent dans blueprints-index.md. Chaque entrée pointe vers blueprints/<id>.md (recette). Ne le lisez pas par spéculation ; chargez-le lorsque vous avez déjà décidé que vous avez besoin d'une orchestration au niveau de la scène.
Routage
| Vous voulez… | Lisez |
|---|---|
| Choisir un motif de mouvement atomique par déclencheur / étiquette | rules-index.md |
| Lire la recette HTML / CSS / GSAP complète d'une règle | rules/<name>.md |
| Choisir un modèle de scène multi-phases | blueprints-index.md |
| Lire la recette complète d'un blueprint | blueprints/<id>.md |
| Créer une transition de scène (pilotée par CSS, entre deux clips) | transitions/overview.md, transitions/catalog.md |
| Consulter une technique plus large de motion design | techniques.md |
| Flou de mouvement — traînée d'obturation sur un élément, et quand ne pas l'utiliser | references/motion-blur.md |
| Analyser la carte d'animation d'une composition existante | scripts/animation-map.mjs |
| API GSAP — timeline / tweens / paramètres de position | adapters/gsap.md |
| GSAP — recettes d'effets prêtes à l'emploi | rules/gsap-effects.md |
| GSAP — transformations / performances | adapters/gsap-transforms-and-perf.md |
| GSAP — easings / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — timeline / labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportations After Effects, window.__hfLottie) | adapters/lottie.md |
| Animation de personnage (cycle de marche, mascotte, marionnette articulée, gestes) | adapters/lottie.md → Personnages |
Three.js / WebGL (scènes 3D, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
Keyframes CSS (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, pipelines de calcul) | adapters/typegpu.md |
HTML comme texture + WebGL/GLSL post-fx (capture DOM live via drawElementImage) | adapters/html-in-canvas-patterns.md |
Effets d'animation de texte nommés (24 IDs via la compétence externe animate-text) | adapters/animate-text.md |
Choisir un runtime
- GSAP est le runtime par défaut pour 95 % du travail d'animation — il couvre l'orchestration des timelines, les transformations, les easings, le stagger. Toutes les règles atomiques de cette compétence sont basées sur GSAP.
- Lottie lorsqu'un actif possède sa propre timeline pré-intégrée (généralement des exportations After Effects), y compris les personnages qui marchent, gesticulent ou réagissent.
- Three.js pour les scènes 3D, les mouvements de caméra, les visuels pilotés par shaders.
- Anime.js pour des transitions légères quand GSAP est trop lourd.
- CSS pour des motifs répétés simples, de la décoration, du scintillement — pas de coût d'animation JavaScript.
- WAAPI pour des keyframes natives du navigateur sans dépendance à GSAP.
- TypeGPU / WebGPU pour des canevas rendus par GPU (particules, verre liquide, shaders personnalisés).
Plusieurs runtimes peuvent coexister dans une même composition. Chacun enregistre ses instances sur le global spécifique au runtime afin qu'HyperFrames puisse les parcourir toutes en une seule passe.
Contraintes critiques
Prérequis : hyperframes-core → Règles non négociables (timeline unique en pause, data-duration gouverne la durée, pas de Math.random / Date.now / performance.now, pas de repeat: -1, pas de gsap.set au chargement de la page sur les clips de scènes ultérieures, pas de display ou de transitions visibility brutes, et pas de construction de timeline à l'intérieur de async / setTimeout / Promise). GSAP autoAlpha et les réglages de visibilité de durée nulle aux limites explicites de la timeline restent autorisés par le noyau. Utilisez ces exceptions uniquement sur des éléments non-clip ou des wrappers à l'intérieur d'un clip ; le framework possède le cycle de vie .clip. Ne répétez pas le contrat complet ici.
Ajouts propres à la compétence d'animation en plus du contrat du noyau :
- Constantes de mise en page pré-calculées — ne dérivez jamais les positions de
getBoundingClientRect()au moment du tween. Les mesures DOM au moment du tween se désynchronisent car le moteur de rendu échantillonne en parallèle ; calculez les coordonnées une fois à la configuration de la composition et réutilisez-les. - Le mouvement spatial utilise uniquement les alias de transformation GSAP (
x,y,scale,rotation). La liste autorisée du noyau permet égalementopacity/color/backgroundColor/borderRadiuspour les transitions de propriétés non spatiales — mais jamaiswidth/height/top/leftpour les changements de mise en page.
Scripts
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Lit chaque timeline GSAP enregistrée sur window.__timelines, énumère les tweens, échantillonne les boîtes englobantes, calcule les indicateurs, et produit animation-map.json. Utilisez-le pour auditer la chorégraphie (zones mortes, cohérence du stagger, avertissements de cycle de vie) après la création.
animation-map.mjs résout d'abord les paquets d'aide du projet actuel, puis peut démarrer la version du paquet HyperFrames fourni. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez la compétence en dehors de l'installation CLI/compétence groupée et que vous devez épingler explicitement cette version de démarrage.
Voir aussi
hyperframes-core— structure de composition, attributs de données, sous-compositions, contrat de rendu déterministehyperframes-creative— palettes, typographie, narration, planification des beats (direction créative non-animation)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render