Instalación de plugins: Antes de ejecutar comandos de configuración o actualización, sigue las reglas de instalación de plugins cuando este skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes conservan las instrucciones de actualización que se indican a continuación.
Animación HyperFrames
Todo el conocimiento de movimiento en un solo skill: reglas (recetas atómicas), planos (plantillas de escenas multifásicas), transiciones (de escena a escena), técnicas (patrones más amplios de motion design) y adaptadores (API por entorno de ejecución).
Para el contrato de composición (atributos de datos, subcomposiciones, determinismo), consulta hyperframes-core.
Valor por defecto: componer reglas atómicas
Elige de 2 a 4 reglas de rules-index.md, pégalas en una sola línea de tiempo pausada de GSAP y listo. Esto es más rápido y genera menos código que empezar desde un plano.
Cargar un plano cuando
- La escena coincide con una plantilla multifásica preexistente (revelación de marca, prueba social, etc.) y reutilizar su proceso 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
| Si quieres… | Lee |
|---|---|
| Elegir un patrón de movimiento atómico por activador / etiqueta | rules-index.md |
| Leer la receta completa HTML / CSS / GSAP de una regla | 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 (mediante CSS, entre dos clips) | transitions/overview.md, transitions/catalog.md |
| Consultar una técnica más amplia de motion design | techniques.md |
| Desenfoque de movimiento: arrastre 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 / tweens / parámetros de posición | adapters/gsap.md |
| GSAP: recetas de efectos listas para usar | rules/gsap-effects.md |
| GSAP: transformaciones / rendimiento | adapters/gsap-transforms-and-perf.md |
| GSAP: easing / stagger | 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 |
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, canalizaciones de cómputo) | adapters/typegpu.md |
HTML como textura + post-efectos WebGL/GLSL (captura DOM en vivo mediante 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 valor por defecto para el 95% del trabajo de movimiento — cubre orquestación de líneas de tiempo, 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 (normalmente exportaciones de After Effects), incluidos personajes que caminan, gesticulan o reaccionan.
- Three.js para escenas 3D, movimiento de cámara, visuales basados en shaders.
- Anime.js para interpolaciones ligeras cuando GSAP es excesivo.
- CSS para motivos simples y repetitivos, decoración, brillos — sin coste de animación en 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).
Múltiples entornos de ejecución pueden coexistir en una misma composición. Cada uno registra sus instancias en el ámbito global específico de su entorno para que HyperFrames pueda buscar en todos ellos en un solo paso.
Restricciones críticas
Requisito previo: hyperframes-core → Una línea de tiempo pausada + 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 una data-duration raíz finita, sin gsap.set al cargar la página en clips de escenas posteriores, sin interpolaciones de display o visibility en bruto, y registrar la línea de tiempo solo después de que esté completamente construida, incluso cuando la construcción se ejecute dentro de una devolución de llamada asíncrona como document.fonts.ready). autoAlpha de GSAP y los conjuntos de visibilidad de duración cero en límites explícitos de la línea de tiempo 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 replantees aquí el contrato completo.
Adiciones de autorí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 del DOM en tiempo de interpolación se desincronizan porque el renderizador muestrea en paralelo; calcula las coordenadas una vez durante la configuración de la composición y reutilízalas. - El movimiento espacial usa solo 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 <SKILL_DIR>/scripts/animation-map.mjs <composicion-dir> \
--out <composicion-dir>/.hyperframes/anim-map
Lee cada línea de tiempo de GSAP registrada en window.__timelines, enumera las interpolaciones, muestrea los cuadros delimitadores, calcula indicadores y genera animation-map.json. Úsalo para auditar la coreografía (zonas muertas, consistencia del stagger, advertencias del ciclo de vida) después de la autoría.
animation-map.mjs resuelve primero los paquetes auxiliares del proyecto actual; luego puede iniciar la versión empaquetada de HyperFrames. Establece HYPERFRAMES_SKILL_PKG_VERSION=<version> solo cuando ejecutes el skill fuera de la instalación empaquetada del CLI/skill 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 representación deterministahyperframes-creative— paletas, tipografía, narración, planificación de ritmo (dirección creativa no relacionada con la animación)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render