Animación de HyperFrames
Todo el conocimiento de movimiento en una skill: reglas (recetas atómicas), planos (plantillas de escenas multifase), transiciones (de escena a escena), técnicas (patrones de diseño de movimiento más amplios) y adaptadores (APIs por tiempo de ejecución).
Para el contrato de composición (atributos de datos, subcomposiciones, determinismo), consulta hyperframes-core.
Predeterminado: componer reglas atómicas
Elige de 2 a 4 reglas de rules-index.md, pégalas juntas con una sola línea de tiempo de GSAP en pausa, listo. Esto es más rápido y produce menos código que comenzar desde un plano.
Cargar un plano cuando
- La escena coincide con una plantilla multifase preexistente (revelación de marca, prueba social, etc.) y reutilizar su canalización de fases ahorra tiempo real de autoría.
- Deseas código verificable ejecutable para una coreografía compleja de 4 a 5 fases.
Los planos viven en blueprints-index.md. Cada entrada apunta a blueprints/<id>.md (receta). No lo leas de forma especulativa; cárgalo cuando ya hayas decidido que necesitas orquestación a nivel de escena.
Enrutamiento
| Quieres... | Lee |
|---|---|
| Elegir un patrón de movimiento atómico por activador/etiqueta | rules-index.md |
| Leer la receta HTML/CSS/GSAP completa de una regla | rules/<name>.md |
| Elegir una plantilla de escena multifase | blueprints-index.md |
| Leer la receta completa de un plano | blueprints/<id>.md |
| Crear una transición de escena (controlada por CSS, entre dos clips) | transitions/overview.md, transitions/catalog.md |
| Consultar una técnica de diseño de movimiento más amplia | techniques.md |
| Analizar el mapa de animación de una composición existente | scripts/animation-map.mjs |
| API de GSAP — línea de tiempo/ interpolaciones/ parámetros de posición | adapters/gsap.md |
| GSAP — recetas de efectos prediseñados | rules/gsap-effects.md |
| GSAP — transformaciones/rendimiento | adapters/gsap-transforms-and-perf.md |
| GSAP — suavizaciones/escalonamiento | adapters/gsap-easing-and-stagger.md |
| GSAP — línea de tiempo/etiquetas | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportaciones de After Effects, window.__hfLottie) | adapters/lottie.md |
Three.js / WebGL (escenas 3D, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
Fotogramas clave CSS (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
API de Animaciones Web (element.animate(), búsqueda currentTime) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, canalizaciones de cómputo) | adapters/typegpu.md |
HTML como textura + post-efectos WebGL/GLSL (capturar DOM en vivo mediante drawElementImage) | adapters/html-in-canvas-patterns.md |
Efectos de animación de texto nombrados (24 IDs mediante la skill externa animate-text) | adapters/animate-text.md |
Elegir un tiempo de ejecución
- GSAP es el predeterminado para el 95% del trabajo de movimiento: cubre orquestación de líneas de tiempo, transformaciones, suavizaciones, escalonamiento. Todas las reglas atómicas en esta skill están basadas en GSAP.
- Lottie cuando un activo tiene su propia línea de tiempo predefinida (típicamente exportaciones de After Effects).
- Three.js para escenas 3D, movimiento de cámara, visuales impulsadas por shaders.
- Anime.js para interpolaciones ligeras cuando GSAP es excesivo.
- CSS para motivos simples repetidos, decoración, brillo: sin costo de animación JavaScript.
- WAAPI para fotogramas clave nativos del navegador sin dependencia de GSAP.
- TypeGPU / WebGPU para lienzos renderizados por GPU (partículas, vidrio líquido, shaders personalizados).
Múltiples tiempos de ejecución pueden coexistir en una composición. Cada uno registra sus instancias en el ámbito global específico del tiempo de ejecución para que HyperFrames pueda buscar en todos ellos en una sola pasada.
Restricciones críticas
Requisito previo: hyperframes-core → Reglas no negociables (una sola línea de tiempo en pausa, data-duration gobierna la duración, sin Math.random / Date.now / performance.now, sin repeat: -1, sin gsap.set en clips de escenas posteriores al cargar la página, sin interpolaciones de display o visibility en bruto, y sin construcción de líneas de tiempo dentro de async / setTimeout / Promise). Las configuraciones de autoAlpha de GSAP y de visibilidad con duración cero en límites explícitos de la línea de tiempo siguen estando permitidas por el núcleo. Usa esas excepciones solo en elementos que no sean clips o en envoltorios dentro de un clip; el framework posee el ciclo de vida de .clip. No vuelvas a enunciar el contrato completo aquí.
Adiciones de creación de animación sobre el contrato del núcleo:
- Constantes de diseño precalculadas — nunca deriven posiciones de
getBoundingRect()en tiempo de interpolación. Las mediciones del DOM en tiempo de interpolación se desincronizan porque el renderizador muestrea en paralelo; calcula las coordenadas una vez en la configuración de la composición y reutilízalas. - El movimiento espacial usa solo los alias de transformación de GSAP (
x,y,scale,rotation). La lista permitida del núcleo también permiteopacity/color/backgroundColor/borderRadiuspara interpolaciones de propiedades no espaciales, pero nuncawidth/height/top/leftpara cambios de diseño.
Scripts
node skills/hyperframes-animation/scripts/animation-map.mjs <directorio-de-composición> \
--out <directorio-de-composición>/.hyperframes/anim-map
Lee cada línea de tiempo de GSAP registrada en window.__timelines, enumera las interpolaciones, muestrea los rectángulos delimitadores, calcula banderas y genera animation-map.json. Úsalo para auditar la coreografía (zonas muertas, consistencia del escalonamiento, advertencias del ciclo de vida) después de la autoría.
animation-map.mjs resuelve primero los paquetes auxiliares del proyecto actual y luego puede iniciar la versión empaquetada de HyperFrames. Establece HYPERFRAMES_SKILL_PKG_VERSION=<versión> solo cuando ejecutes la skill fuera de la instalación empaquetada (CLI/skill install) y necesites fijar esa versión de inicio explícitamente.
Véase también
hyperframes-core— estructura de composición, atributos de datos, subcomposiciones, contrato de renderizado deterministahyperframes-creative— paletas, tipografía, narración, planificación de ritmos (dirección creativa no animada)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render