HyperFrames Motion
Toutes les connaissances en animation en un seul skill : règles (recettes atomiques), blueprints (modèles de scènes multi-phases), transitions (de scène à scène), techniques (modèles 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 avec 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 quand
- La scène correspond à un modèle multi-phases pré-conçu existant (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) et la réutilisation de son pipeline de phases fait gagner du temps de création.
- Vous voulez du 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) et examples/<id>.html (exemple exécutable). Ne le lisez pas par simple spéculation ; chargez-le uniquement lorsque vous avez déjà décidé d'avoir besoin d'une orchestration au niveau de la scène.
Routage
| Pour… | Lire |
|---|---|
| Choisir un motif 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 modèle de scène multi-phases | blueprints-index.md |
| Lire la recette complète d'un blueprint | blueprints/<id>.md + examples/<id>.html |
| 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 |
| 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 |
CSS keyframes (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 IDs via le skill externe animate-text) | adapters/animate-text.md |
Choisir un runtime
- GSAP est le runtime par défaut pour 95 % du travail de mouvement — il couvre l'orchestration des timelines, les transformations, l'easing et le stagger. Toutes les règles atomiques de ce skill sont basées sur GSAP.
- Lottie lorsqu'un élément possède sa propre timeline pré-intégrée (généralement des exports After Effects).
- 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 lorsque GSAP est excessif.
- CSS pour des motifs simples et répétés, la décoration, le scintillement — aucun coût JavaScript d'animation.
- 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 runtimes peuvent coexister dans une même composition. Chacun enregistre ses instances sur la variable globale spécifique au runtime afin qu'HyperFrames puisse toutes les parcourir en une seule passe.
Contraintes critiques
Prérequis : /hyperframes/core → Règles non négociables (timeline unique en pause, data-duration régit la durée, pas de Math.random / Date.now / performance.now, pas de repeat: -1, pas de gsap.set sur les clips de scènes ultérieures, pas d'animation sur display / visibility, pas de construction de timeline à l'intérieur de async / setTimeout / Promise). Ne les répétez pas ici.
Ajouts propres à l'animation par-dessus le contrat du core :
- Constantes de layout pré-calculées — ne dérivez jamais les positions de
getBoundingClientRect()au moment du tween. Les mesures DOM effectuées pendant le 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 d'autorisation du core permet égalementopacity/color/backgroundColor/borderRadiuspour les tweens de propriétés non spatiales — mais jamaiswidth/height/top/leftpour les changements de layout.
Scripts
node skills/hyperframes-motion/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 et produit animation-map.json. Utilisez-le pour auditer la chorégraphie (zones mortes, cohérence du stagger, avertissements sur le cycle de vie) après la création.
Voir aussi
/hyperframes→core/— structure de composition, attributs de données, sous-compositions, contrat de rendu déterministe/hyperframes-design— palettes, typographie, planification des battements (direction créative non liée à l'animation)/hyperframes→cli/—npx hyperframes lint / validate / inspect / preview / render