Instalación de plugins: Antes de ejecutar comandos de configuración o frescura, sigue las reglas de ejecución de plugins cuando este skill se encuentre dentro de un plugin de HyperFrames. Las instalaciones independientes conservan las instrucciones de actualización que se indican a continuación.
Animación de HyperFrames
Todo el conocimiento de movimiento en un solo skill: reglas (recetas atómicas), planos (plantillas de escena multifásicas), transiciones (de escena a escena), técnicas (patrones generales de diseño de movimiento) y adaptadores (APIs por runtime).
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 con una única 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 multifásica predefinida existente (revelación de marca, prueba social, etc.) y reutilizar su pipeline de fases ahorra tiempo de autoría real.
- Deseas un código de referencia ejecutable para una coreografía compleja de 4 a 5 fases.
Los planos se encuentran en blueprints-index.md. Cada entrada apunta a blueprints/<id>.md (receta). No lo leas especulativamente; cárgalo solo 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 completa de una regla en HTML / CSS / GSAP | rules/<name>.md |
| Elegir una plantilla de escena multifásica | blueprints-index.md |
| Leer la receta completa de un plano | blueprints/<id>.md |
| Crear una transición de escena (impulsada por CSS, entre dos clips) | transitions/overview.md, transitions/catalog.md |
| Consultar una técnica general de diseño de movimiento | techniques.md |
| Desenfoque de movimiento: estela de obturador en un elemento, y cuándo no usarlo | references/motion-blur.md |
| Analizar el mapa de animación de una composición existente | scripts/animation-map.mjs |
| API de GSAP: timeline / tweens / parámetros de posición | adapters/gsap.md |
| GSAP: recetas de efectos integrables | rules/gsap-effects.md |
| GSAP: transformaciones / rendimiento | adapters/gsap-transforms-and-perf.md |
| GSAP: easing / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP: timeline / etiquetas | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (exportaciones de After Effects, window.__hfLottie) | adapters/lottie.md |
| Animación de personajes (ciclo de caminata, mascota, marioneta articulada, gestos) | adapters/lottie.md → Characters |
Three.js / WebGL (escenas 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(), búsqueda con currentTime) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, canales de cómputo) | adapters/typegpu.md |
HTML como textura + post-efectos WebGL/GLSL (capturar DOM en vivo con drawElementImage) | adapters/html-in-canvas-patterns.md |
Efectos de animación de texto con nombre (24 IDs mediante el skill externo animate-text) | adapters/animate-text.md |
Elección de runtime
- GSAP es el predeterminado para el 95% del trabajo de movimiento: cubre orquestación de timeline, transformaciones, easing, stagger. Todas las reglas atómicas de este skill están basadas en GSAP.
- Lottie cuando un activo tiene su propia línea de tiempo predefinida (generalmente exportaciones de After Effects), incluidos personajes que caminan, gesticulan o reaccionan.
- Three.js para escenas 3D, movimiento de cámara, visuales impulsados por shaders.
- Anime.js para interpolaciones ligeras cuando GSAP es excesivo.
- CSS para motivos repetitivos simples, decoración, destellos: sin costo de animación JavaScript.
- WAAPI para keyframes nativos del navegador sin dependencia de GSAP.
- TypeGPU / WebGPU para lienzos renderizados por GPU (partículas, vidrio líquido, shaders personalizados).
Varios runtimes pueden coexistir en una misma composición. Cada uno registra sus instancias en el ámbito global específico del runtime para que HyperFrames pueda buscarlas a todas en un solo paso.
Restricciones críticas
Requisito previo: hyperframes-core → Reglas no negociables (única línea de tiempo en pausa, data-duration gobierna la duración, no usar Math.random / Date.now / performance.now, no repeat: -1, no gsap.set al cargar la página en clips de escenas posteriores, no usar tweens de display ni visibility puro, y no construir la línea de tiempo dentro de async / setTimeout / Promise). GSAP autoAlpha y los ajustes de visibilidad de duración cero en límites explícitos de timeline siguen permitidos por el núcleo. Usa esas excepciones solo en elementos que no sean clips o envoltorios dentro de un clip; el framework posee el ciclo de vida de .clip. No repitas el contrato completo aquí.
Adiciones de artesanía de animación sobre el contrato del núcleo:
- Constantes de diseño precalculadas — nunca derives posiciones de
getBoundingClientRect()en el momento del tween. Las mediciones del DOM en tiempo de tween se desincronizan porque el renderizador muestrea en paralelo; calcula coordenadas una vez en la configuración de la composición y reutilízalas. - El movimiento espacial solo usa alias de transformación de GSAP (
x,y,scale,rotation). La lista permitida del núcleo también permiteopacity/color/backgroundColor/borderRadiuspara tweens de propiedades no espaciales, pero nuncawidth/height/top/leftpara cambios de diseño.
Scripts
node skills/hyperframes-animation/scripts/animation-map.mjs <directorio-de-composicion> \
--out <directorio-de-composicion>/.hyperframes/anim-map
Lee cada línea de tiempo de GSAP registrada en window.__timelines, enumera los tweens, muestrea los bounding boxes, calcula banderas y genera animation-map.json. Úsalo para auditar la coreografía (zonas muertas, consistencia de stagger, advertencias del ciclo de vida) después de la autoría.
animation-map.mjs primero resuelve los paquetes auxiliares desde el proyecto actual, luego puede iniciar la versión empaquetada del paquete HyperFrames. Establece HYPERFRAMES_SKILL_PKG_VERSION=<version> solo cuando ejecutas el skill fuera de la instalación empaquetada de CLI/skill y necesitas 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 determinista.hyperframes-creative: paletas, tipografía, narración, planificación de ritmos (dirección creativa no relacionada con animación).hyperframes-cli:npx hyperframes lint / check / snapshot / preview / render.