hyperframes-animationpor HeyGen

HyperFrames Animation Skill.

Un skill de Claude Code y Codex para movimiento y video: reglas de animación, planos de escena, transiciones y adaptadores de ejecución para HyperFrames.

Movimiento y video
Video

Descargar OpenDesign Ver guía de uso

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

Encabezados de sección y metadatos leídos del archivo fuente el 14 de septiembre de 2026 · 7.755 caracteres en total

01 Qué hace

Qué Hace la Skill hyperframes-animation en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Proporciona todo el conocimiento de animación para HyperFrames: reglas de movimiento atómico, planos de escenas multifase, transiciones entre escenas, técnicas de diseño de movimiento y siete adaptadores de runtime (GSAP por defecto, además de Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Los usuarios eligen 2-4 reglas atómicas y las combinan con una única timeline de GSAP en pausa, o cargan un blueprint multifase para coreografías complejas de 4-5 fases, o consultan las API específicas de cada runtime.

También cubre la auditoría de composiciones existentes mediante animation-map.mjs y 24 efectos de animación de texto con nombre. GSAP es la opción por defecto para el 95% del trabajo de movimiento, cubriendo orquestación de timeline, transformaciones, easing y stagger. Todo es nativo de HyperFrames: una única timeline en pausa, segura para seek, determinista.

Qué produce

animation-map.json que contiene datos de auditoría de coreografía con zonas muertas, consistencia de stagger y advertencias de ciclo de vida

Ver el ejemplo de prompt ↗

Cómo funciona

01
Elegir y Componer Reglas Atómicas
Selecciona 2-4 reglas de rules-index.md y combínalas con una única timeline de GSAP en pausa. Este es el flujo de trabajo predeterminado, más rápido que empezar desde un blueprint.
02
Cargar un Blueprint para Escenas Multifase
Cuando la escena coincide con una plantilla prediseñada existente como brand-reveal o social-proof, carga su receta desde blueprints-index.md para reutilizar su pipeline de fases.
03
Consultar API Específicas de Cada Runtime
Usa la tabla de enrutamiento para encontrar eases y controles de timeline de GSAP, métodos del reproductor de Lottie, API del mixer de Three.js, u otra documentación específica de runtime según sea necesario.
04
Auditar la Coreografía con animation-map
Ejecuta animation-map.mjs para leer cada timeline de GSAP, enumerar los tweens, muestrear bboxes, calcular indicadores y generar animation-map.json para auditar zonas muertas y consistencia de stagger.

02 Encuentra tu caso de uso

Cuándo Usar el Skill hyperframes-animation

Use el skill hyperframes-animation en Claude Code o Codex cuando el trabajo sea movimiento y video de este tipo. El ajuste y los límites a continuación se toman del archivo propio del skill.

Buen caso de uso

Patrones de movimiento atómico seleccionados por disparador o etiqueta desde rules-index.md
Transiciones de escena impulsadas por CSS entre dos clips
Escenas 3D, movimiento de cámara y visuales impulsados por shaders usando Three.js
Lienzos renderizados por GPU con partículas, vidrio líquido o shaders personalizados usando TypeGPU

Conozca los límites

Animación de width, height, top o left para cambios de layout

Qué proporcionar

Directorio de composiciónProporciona la ruta a tu directorio de composición al ejecutar animation-map.mjs para auditar la coreografía.
ID de blueprintCuando tu escena coincide con una plantilla multifase, proporciona el ID de blueprint desde blueprints-index.md para cargar su receta completa.

03 Dentro del skill

Reglas que la Skill hyperframes-animation Da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Precalcular Constantes de Layout
Nunca derive posiciones de getBoundingClientRect en el momento del tween.
El Movimiento Espacial Solo Usa Alias de Transformación de GSAP
Utilice x, y, scale y rotation para todo el movimiento espacial. Nunca anime width, height, top o left para cambios de diseño.
GSAP Es el Runtime Predeterminado
GSAP es el predeterminado para el 95% del trabajo de movimiento, cubriendo orquestación de timelines, transformaciones, easing y stagger. Todas las reglas atómicas de este skill se basan en GSAP.
Componga Reglas Atómicas por Defecto
Elija 2-4 reglas de rules-index.md y compóngalas. Esto es más rápido y produce menos código que empezar desde un blueprint.
Múltiples Runtimes Pueden Coexistir
Múltiples runtimes pueden coexistir en una composición. Cada uno registra sus instancias en el global específico del runtime para que HyperFrames pueda buscar en todos ellos en una sola pasada.
No Lea Blueprints de Forma Especulativa
No lea un archivo de blueprint de forma especulativa; cárguelo solo cuando ya haya decidido que necesita orquestación a nivel de escena.
Se Permiten Propiedades No Espaciales
La lista de permitidos incluye opacity, color, backgroundColor y borderRadius para tweens de propiedades no espaciales, pero nunca width, height, top o left para cambios de layout.

04 Ponlo a trabajar

Instalar hyperframes-animation en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregue hyperframes-animation a Claude Code, Codex o Su Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Forma genérica de la CLI skills para skills/hyperframes-animation/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirme que todas las instancias de runtime estén registradas en sus globales específicos de runtime para que HyperFrames pueda buscarlas en una sola pasada

En OpenDesign importe hyperframes-animation desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Rama main
Archivo de skill: skills/hyperframes-animation/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 49,761 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio heygen-com/hyperframes, que contiene 9 skills en este catálogo. No es una calificación o recuento de uso para hyperframes-animation.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Predeterminado: componer reglas atómicasElija 2-4 reglas de rules-index.md y compóngalas con GSAP timeline, más rápido que los blueprints
Cargue un blueprint cuandoÚselo cuando la escena coincida con una plantilla multifase o necesite una coreografía ejecutable de 4-5 fases
EnrutamientoTabla que asigna tareas a archivos: rules, blueprints, transitions, techniques, adapters, scripts
Elección de un runtimeCuándo usar GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU
Restricciones CríticasConstantes de layout precalculadas, solo alias de transformación de GSAP, sin tweens de width/height/top/left
ScriptsEjecute animation-map.mjs para auditar la coreografía y generar animation-map.json
Ver TambiénEnlaces a hyperframes-core, hyperframes-creative, hyperframes-cli

La descripción propia del Skill

Todo el conocimiento de animación para HyperFrames: reglas de movimiento atómicas, planos de escena multifase, transiciones de escena, técnicas más amplias de diseño de movimiento, Y los siete adaptadores de runtime (GSAP por defecto, más Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Úsalo para cualquier tarea de movimiento o animación: elige 2-4 reglas y compón, o carga un plano, o consulta API específicas del runtime (por ejemplo, eases de GSAP / reproductor de Lottie / mixer de Three.js). También cubre la auditoría de la coreografía (mapa de animación) de una composición existente y 24 efectos de animación de texto con nombre. Nativo de HyperFrames: línea de tiempo única en pausa, seguro para seek, determinístico.

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 7,755 caracteres. Lea el archivo completo en GitHub.

HyperFrames Animation

Ejecute hyperframes-animation en una Tarea Real de Movimiento y Video.

Descarga OpenDesign, importa hyperframes-animation desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Qué Hace la Skill hyperframes-animation en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el Skill hyperframes-animation

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que la Skill hyperframes-animation Da a Claude Code y Codex

Precalcular Constantes de Layout

El Movimiento Espacial Solo Usa Alias de Transformación de GSAP

GSAP Es el Runtime Predeterminado

Componga Reglas Atómicas por Defecto

Múltiples Runtimes Pueden Coexistir

No Lea Blueprints de Forma Especulativa

Se Permiten Propiedades No Espaciales