Installation du plugin : Avant les commandes de configuration ou de fraîcheur, suivez les règles d'exécution du plugin lorsque ce skill se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Animation HyperFrames
Tout le savoir-faire en animation en un seul skill : règles (recettes atomiques), plans (templates de scène multi-phases), transitions (de scène à scène), techniques (schémas de motion design plus larges) 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 sur une seule timeline GSAP en pause, c'est fait. C'est plus rapide et produit moins de code que de partir d'un plan.
Charger un plan lorsque
- La scène correspond à un template multi-phases préexistant (brand-reveal, preuve sociale, etc.) et que réutiliser son pipeline de phases fait gagner un temps d'écriture réel.
- Vous voulez du code exécutable de référence pour une chorégraphie complexe en 4-5 phases.
Les plans se trouvent dans blueprints-index.md. Chaque entrée pointe vers blueprints/<id>.md (recette). Ne les lisez pas par curiosité ; chargez-les une fois que vous avez déjà décidé d'une orchestration au niveau de la scène.
Routage
| Pour… | Lire |
|---|---|
| Choisir un schéma de mouvement atomique par déclencheur / tag | rules-index.md |
| Lire la recette HTML/CSS/GSAP complète d'une règle | rules/<name>.md |
| Choisir un template de scène multi-phases | blueprints-index.md |
| Lire la recette complète d'un plan | blueprints/<id>.md |
| Écrire une transition de scène (pilotée par CSS, entre deux clips) | transitions/overview.md, transitions/catalog.md |
| Consulter une technique de motion design plus large | techniques.md |
| Flou de mouvement — effet de traînée sur un élément, et quand ne pas l'utiliser | references/motion-blur.md |
| Analyser le plan 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 — easing / 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 |
Web Animations API (element.animate(), recherche currentTime) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, pipelines de calcul) | adapters/typegpu.md |
HTML-en-texture + post-effets WebGL/GLSL (capturer le DOM via drawElementImage) | adapters/html-in-canvas-patterns.md |
Effets d'animation de texte nommés (24 IDs via le skill externe animate-text) | adapters/animate-text.md |
Choix d'un runtime
- GSAP est le runtime par défaut pour 95% du travail d'animation — orchestration des timelines, transformations, easing, stagger. Toutes les règles atomiques de ce skill sont basées sur GSAP.
- Lottie lorsqu'un asset possède sa propre timeline pré-intégrée (généralement des exports After Effects), y compris pour 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 tweens légers quand GSAP est trop lourd.
- CSS pour des motifs simples et répétés, de la décoration, des scintillements — sans coût d'animation JavaScript.
- WAAPI pour les keyframes natives du navigateur sans dépendance GSAP.
- TypeGPU / WebGPU pour les canvas 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 toutes les rechercher 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 des scènes ultérieures, pas de tweens display ou visibility brutes, et pas de construction de timeline dans async / setTimeout / Promise). Les autoAlpha GSAP et les réglages de visibilité de durée nulle à des limites de timeline explicites restent autorisés par le core. 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 du .clip. Ne répétez pas le contrat complet ici.
Ajouts de savoir-faire en animation au-dessus du contrat du core :
- 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 exclusivement les alias de transformation GSAP (
x,y,scale,rotation). La liste blanche du core autorise é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 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 drapeaux 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 l'écriture.
animation-map.mjs résout d'abord les packages d'aide depuis le projet courant, puis peut amorcer la version du package HyperFrames incluse. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez le skill en dehors de l'installation groupée CLI/skill et que vous devez épingler explicitement cette version d'amorçage.
Voir aussi
hyperframes-core— structure de la composition, attributs de données, sous-compositions, contrat de rendu déterministehyperframes-creative— palettes, typographie, narration, planification des temps (direction créative non-animation)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render