Installation du plugin : Avant les commandes de configuration ou de mise à jour, suivez les règles d'installation du plugin lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
HyperFrames Animation
Tout le savoir-faire en animation dans une seule compétence : règles (recettes atomiques), blueprints (modèles de scènes multi-phases), transitions (de scène à scène), techniques (schémas plus larges de design de mouvement) et adaptateurs (API par environnement d'exécution).
Pour le contrat de composition (attributs de données, sous-compositions, déterminisme), voir hyperframes-core.
Par défaut : composer avec des règles atomiques
Choisissez 2 à 4 règles dans rules-index.md, reliez-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 quand
- La scène correspond à un modèle multi-phases pré-existant (révélation de marque, preuve sociale, etc.) et réutiliser son pipeline de phases fait gagner du temps de création.
- Vous voulez un code de référence exécutable pour une chorégraphie complexe en 4-5 phases.
Les blueprints se trouvent dans blueprints-index.md. Chaque entrée pointe vers blueprints/<id>.md (recette). Ne lisez pas ce fichier de manière spéculative ; chargez-le seulement après avoir décidé que vous avez besoin d'une orchestration au niveau de la scène.
Routage
| Vous souhaitez… | Lisez |
|---|---|
| Choisir un motif de mouvement atomique par déclencheur / étiquette | rules-index.md |
| Lire la recette complète HTML / CSS / GSAP 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 entre scènes (CSS, entre deux clips) | transitions/overview.md, transitions/catalog.md |
| Consulter une technique plus large de design de mouvement | techniques.md |
| Flou de mouvement — traînée d'obturateur 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êts à 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 (exports 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 |
API Web Animations (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, pipelines de calcul) | adapters/typegpu.md |
HTML comme texture + post-fx WebGL/GLSL (capture DOM en direct via drawElementImage) | adapters/html-in-canvas-patterns.md |
Effets d'animation de texte nommés (24 identifiants via la compétence externe animate-text) | adapters/animate-text.md |
Choisir un environnement d'exécution
- GSAP est le choix par défaut pour 95% du travail de mouvement — il couvre l'orchestration des timelines, les transformations, l'assouplissement, le stagger. Toutes les règles atomiques de cette compétence sont basées sur GSAP.
- Lottie lorsque un actif a sa propre timeline pré-intégrée (généralement des exports After Effects), y compris des personnages qui marchent, font des gestes ou réagissent.
- Three.js pour les scènes 3D, le mouvement de caméra, les visuels pilotés par shaders.
- Anime.js pour des tweens légers quand GSAP est excessif.
- CSS pour des motifs simples et répétés, des décorations, des reflets — sans coût JavaScript d'animation.
- WAAPI pour des keyframes natives du navigateur sans dépendance à GSAP.
- TypeGPU / WebGPU pour les canevas rendus sur GPU (particules, verre liquide, shaders personnalisés).
Plusieurs environnements peuvent coexister dans une même composition. Chacun enregistre ses instances sur le global spécifique à l'environnement afin qu'HyperFrames puisse les parcourir en une seule passe.
Contraintes critiques
Prérequis : hyperframes-core → Une seule timeline en pause + Règles non négociables (une seule timeline en pause, data-duration gouverne la durée, pas de Math.random / Date.now / performance.now, pas de repeat: -1 sans data-duration racine finie, pas de gsap.set au chargement de la page sur des clips de scènes ultérieures, pas de tweens sur display ou visibility bruts, et enregistrer la timeline seulement après qu'elle soit entièrement construite, y compris lorsque la construction s'exécute dans un callback asynchrone tel que document.fonts.ready). Les autoAlpha de GSAP et les réglages de visibilité à durée nulle aux limites explicites de la timeline restent autorisés par le noyau. N'utilisez ces exceptions que sur des éléments non clip ou des wrappers à l'intérieur d'un clip ; le framework possède le cycle de vie des .clip. Ne répétez pas l'intégralité du contrat ici.
Ajouts spécifiques à la création d'animation par-dessus le 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 lors de 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 tweens de propriétés non spatiales — mais jamaiswidth/height/top/leftpour les changements de mise en page.
Scripts
node <SKILL_DIR>/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 des indicateurs, 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 courant, puis peut amorcer 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 fournie du CLI/de la compétence et que vous devez épingler explicitement cette version d'amorçage.
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 (orientation créative non liée à l'animation)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render