Instalación del plugin: Antes de los comandos de configuración o actualización, sigue las reglas de ejecución del plugin cuando este skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes conservan las instrucciones de actualización a continuación.
Animación HyperFrames
Todo el conocimiento de movimiento en un solo skill: reglas (recetas atómicas), planos (plantillas de escenas multifase), transiciones (de escena a escena), técnicas (patrones más amplios de diseño de movimiento) y adaptadores (API por entorno de ejecución).
Para el contrato de composición (atributos de datos, subcomposiciones, determinismo), consulta hyperframes-core.
Por defecto: componer reglas atómicas
Elige de 2 a 4 reglas de rules-index.md, pégalas juntas en una sola línea de tiempo de GSAP pausada, listo. Esto es más rápido y produce menos código que empezar desde un plano.
Cargar un plano cuando
- La escena coincide con una plantilla prediseñada de múltiples fases (revelación de marca, prueba social, etc.) y reutilizar su canalización de fases ahorra tiempo real de autoría.
- Deseas código verificable y 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 de forma especulativa; cárgalo solo cuando ya hayas decidido que necesitas orquestación a nivel de escena.
Enrutamiento
| Quieres… | Lee |
|---|---|
| Elegir un patrón atómico de movimiento por activador / etiqueta | rules-index.md |
| Leer la receta completa HTML / CSS / GSAP 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 (impulsada por CSS, entre dos clips) | transitions/overview.md, transitions/catalog.md |
| Consultar una técnica más amplia de diseño de movimiento | techniques.md |
| Desenfoque de movimiento: efecto 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 — línea de tiempo / interpolaciones / parámetros de posición | adapters/gsap.md |
| GSAP — recetas de efectos listos para usar | rules/gsap-effects.md |
| GSAP — transformaciones / rendimiento | adapters/gsap-transforms-and-perf.md |
| GSAP — suavizados / escalonado | 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 |
| Animación de personajes (ciclo de caminata, mascota, marioneta articulada, gestos) | adapters/lottie.md → Personajes |
Three.js / WebGL (escenas 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(), búsqueda por currentTime) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, pipelines de cómputo) | adapters/typegpu.md |
HTML como textura + efectos posteriores 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 |
Elegir un entorno de ejecución
- GSAP es el predeterminado para el 95% del trabajo de movimiento: cubre orquestación de líneas de tiempo, transformaciones, suavizados, escalonado. 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 (normalmente 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, brillo: 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 entornos de ejecución pueden coexistir en una misma composición. Cada uno registra sus instancias en el global específico del entorno 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 pausada, data-duration gobierna la duración, sin Math.random / Date.now / performance.now, sin repeat: -1, sin gsap.set en la carga de página en clips de escenas posteriores, sin interpolaciones de display o visibility en bruto, y sin construcción de líneas de tiempo dentro de async / setTimeout / Promise). Sigue permitido por el núcleo el uso de autoAlpha de GSAP y conjuntos de visibilidad con duración cero en límites explícitos de la línea de tiempo. Usa esas excepciones solo en elementos que no sean clips o envoltorios dentro de un clip; el framework es dueño del ciclo de vida de .clip. No replantees 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 de la interpolación. Las mediciones 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 cuadros delimitadores, calcula banderas y genera animation-map.json. Úsalo para auditar la coreografía (zonas muertas, consistencia del escalonado, advertencias del ciclo de vida) después de la autoría.
animation-map.mjs resuelve los paquetes auxiliares del proyecto actual primero; luego puede iniciar la versión empaquetada del paquete HyperFrames. Establece HYPERFRAMES_SKILL_PKG_VERSION=<version> solo cuando ejecutes el skill fuera de la instalación empaquetada de CLI/skill y necesites fijar explícitamente esa versión de inicio.
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 relacionada con animación)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render