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 environnement d'exécution).
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 fait. 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-phase pré-conçu existant (révélation de marque, preuve sociale, etc.) et la réutilisation de son pipeline de phases fait gagner un temps d'écriture réel.
- Vous voulez un code fiable et 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 le lisez pas par simple curiosité ; chargez-le une fois que vous avez déjà décidé qu'une orchestration au niveau scène est nécessaire.
Routage
| Vous voulez... | Lisez |
|---|---|
| Choisir un motif de mouvement atomique par déclencheur / tag | rules-index.md |
| Lire la recette complète HTML / CSS / GSAP d'une règle | rules/<nom>.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 (CSS, entre deux clips) | transitions/overview.md, transitions/catalog.md |
| Chercher une technique plus large de motion design | techniques.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 — 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 |
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 + post-effets WebGL/GLSL (capture DOM en direct via drawElementImage) | adapters/html-in-canvas-patterns.md |
Effets d'animation de texte nommés (24 ID via la compétence animate-text externe) | adapters/animate-text.md |
Choisir un environnement d'exécution
- GSAP est la valeur par défaut pour 95 % du travail de motion — il couvre l'orchestration de timeline, les transformations, l'easing, le stagger. Toutes les règles atomiques de cette compétence sont basées sur GSAP.
- Lottie quand un actif a sa propre timeline pré-intégrée (généralement des exports After Effects).
- Three.js pour les scènes 3D, le mouvement de caméra, les visuels pilotés par shaders.
- Anime.js pour des interpolations légères quand GSAP est trop lourd.
- CSS pour des motifs simples répétés, de la décoration, du scintillement — aucun coût d'animation JavaScript.
- WAAPI pour des keyframes natifs du navigateur sans dépendance à GSAP.
- TypeGPU / WebGPU pour des canevas rendus par GPU (particules, verre liquide, shaders personnalisés).
Plusieurs environnements d'exécution peuvent coexister dans une même composition. Chacun enregistre ses instances sur la variable globale spécifique à l'environnement afin que HyperFrames puisse toutes les parcourir en une seule passe.
Contraintes critiques
Prérequis : hyperframes-core → 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, pas de gsap.set au chargement de page sur les clips de scènes ultérieures, pas d'interpolation sur display ou visibility brut, et pas de construction de timeline dans async / setTimeout / Promise). 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. 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 l'intégralité du contrat ici.
Ajouts pour la création d'animations par-dessus le contrat du noyau :
- Constantes de mise en page pré-calculées — ne dérivez jamais les positions de
getBoundingClientRect()au moment de l'interpolation. Les mesures DOM au moment de l'interpolation 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 interpolations 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 <répertoire-de-composition> \
--out <répertoire-de-composition>/.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 l'écriture.
animation-map.mjs résout d'abord les paquets d'aide du projet en cours, puis peut amorcer la version groupée du paquet HyperFrames. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez la compétence en dehors de l'installation groupée CLI/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 (direction créative non-animation)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render