hyperframes-keyframespor HeyGen

HyperFrames Keyframes Skill.

Un skill de Claude Code y Codex para movimiento y video: acercamientos, zooms, reencuadres, movimientos Ken Burns y keyframes 2D/3D para HyperFrames.

Movimiento y video
Video

Descargar OpenDesign Ver guía de uso

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

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

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

01 Qué hace

Qué hace el skill hyperframes-keyframes 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

Gestiona punch-ins, punch-outs, zooms, reencuadres, movimientos Ken Burns, movimientos de cámara, transferencias de match/whip visuales y keyframes 2D/3D seek-safe para composiciones de HyperFrames. Admite GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, máscaras, morph/draw SVG, estelas de texto y profundidad 3D. Los keyframes son un contrato de pose: estados visibles, identidad continua del sujeto, runtime seek-safe, píxeles verificados.

Se centra en el movimiento visual dentro de los clips, no en el ensamblaje de clips ni en la estrategia de escena. Requiere construcción síncrona del runtime, instancias de timeline registradas y temporización determinista. Los autores verifican con hyperframes lint, check, el comando keyframes, diagnósticos --shot focalizados y snapshots en los tiempos de prueba.

Qué produce

Instancia de timeline de GSAP registrada en window.__timelines[compositionId] con paused: true

Ver el ejemplo de prompt ↗

Cómo funciona

01
Identificar el Sujeto y los Estados
Identifique el sujeto animado, los estados visibles, el estado final y el runtime antes de crear los keyframes.
02
Elegir el Mecanismo Más Pequeño
Elija el mecanismo más pequeño que demuestre el prompt, consultando references/keyframe-patterns.md solo si el mecanismo no está claro.
03
Crear y Registrar
Cree keyframes seek-safe en el runtime declarado, construyendo de forma síncrona y registrando la instancia del runtime.
04
Verificar con Diagnósticos
Verifique usando hyperframes lint, check, el comando keyframes, un --shot focalizado y snapshots en los tiempos de prueba.
05
Corregir y Volver a Probar
Si la prueba falla, corrija los keyframes de origen y vuelva a ejecutar el diagnóstico fallido más pequeño antes de renderizar.

02 Encuentra tu caso de uso

Cuándo Usar el Skill hyperframes-keyframes

Use el skill hyperframes-keyframes 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 propio archivo del skill.

Buen caso de uso

Punch-in o punch-out con escala y traslación con keyframes en un wrapper visual/de recorte no temporizado dentro del clip
Zoom o reencuadre suave multiestado que mantiene vivo un único wrapper de sujeto con múltiples estados como una escalera de poses
Movimiento de cámara de tipo pan, reencuadre o Ken Burns con traslación animada del wrapper más escala
Movimientos de cámara encadenados con beats de transformación etiquetados en un único timeline registrado y seek-safe
Match cut o whip pan que preserva la geometría, dirección y velocidad creadas

Conozca los límites

Estrategia de escena amplia, diseño de marca, obtención de medios, subtítulos o planificación general de video
Cortes duros por rango de origen, recorte, empalme y reordenamiento, que pertenecen a hyperframes-core
Rampas de velocidad de origen con una envolvente de velocidad de reproducción variable en el tiempo, que no son compatibles
Fotogramas congelados arbitrarios a mitad del origen, que requieren preprocesar un segmento fijo/derivado

Qué proporcionar

Poses visibles y estado finalLas poses necesarias para demostrar el movimiento previsto, incluido el estado final que completa la animación.

03 Dentro del skill

Reglas que el skill hyperframes-keyframes da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Líneas de Tiempo GSAP en Pausa
Las líneas de tiempo GSAP deben usar gsap.timeline({ paused: true }), nunca llamar a tl.play() para movimiento crítico para el renderizado, y estar registradas como window.__timelines[compositionId] con una clave que coincida con data-composition-id.
Anime.js con Autoplay False
Las instancias de Anime.js deben tener autoplay: false y ser añadidas a window.__hfAnime con una duración y un número de bucles finitos.
Modo de Relleno de CSS Keyframes
Los CSS keyframes requieren duración e iteración finitas, un retraso determinista y animation-fill-mode: both.
Nunca Usar Temporizadores ni Random
Nunca uses Date.now(), performance.now(), Math.random() sin semilla, disparadores de hover/scroll, temporizadores, líneas de tiempo creadas de forma asíncrona, requestAnimationFrame no registrado ni bucles infinitos para movimiento crítico para el renderizado.
Solo Canales Visibles en Keyframes
Aplica keyframes a canales visibles como x/y/z, escala, opacidad, clip-path, máscaras, no a estado auxiliar oculto.
Preservar la Identidad del Objeto
Preserva la identidad del objeto cuando la continuidad importa. Aplica crossfade solo cuando el movimiento previsto sea de reemplazo o disolución.
El Fotograma Final Forma Parte de la Animación
El fotograma final forma parte de la animación, no es limpieza. No reinicies al estado de reposo salvo que se solicite. No termines en negro salvo que se solicite.
Nombrar Sujetos y Poses
Nombra el sujeto en movimiento y las poses necesarias para demostrar el movimiento previsto, incluido el estado final.

04 Ponlo a trabajar

Instalar hyperframes-keyframes 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.

Agregar hyperframes-keyframes 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-keyframes

Forma genérica de la CLI skills para skills/hyperframes-keyframes/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

Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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:

Ejecuta hyperframes lint para comprobar problemas estructurales
Ejecuta hyperframes check para validar la composición
Ejecute hyperframes keyframes con --shot y --samples para verificar objetivos, paradas, rutas y espaciado temporal
Use --layout strip para comprobar el movimiento in situ, las superposiciones, el contacto y los cambios sutiles de escala/opacidad
Use --ghost con --angle para comprobar el canvas, WebGL, el movimiento de shaders y la proyección de profundidad 3D
Capture el primer frame, las poses de prueba, el final-menos-hold y el final exacto para verificar máscaras, legibilidad del texto, el estado completo y la ausencia de colas negras/de reinicio

En OpenDesign importe hyperframes-keyframes desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y 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-keyframes/SKILL.md Checksum de contenido registrado en la verificación; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 49.761 Instantánea de GitHub tomada el 14/09/2026 para el repositorio completo heygen-com/hyperframes, que contiene 9 skills en este catálogo. No es una calificación ni un recuento de uso para hyperframes-keyframes.
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

Límite de edición del creadorKeyframes gestiona el movimiento visual; el núcleo gestiona el ensamblaje de clips, el recorte, el splice, los desplazamientos de fuente y los cortes duros
ProcedimientoFlujo de trabajo de cinco pasos, desde identificar el sujeto y los estados hasta la creación, la verificación y las correcciones basadas en diagnósticos
ContratoNombre sujetos y poses, aplique keyframes a los canales visibles, preserve la identidad, mantenga los estados el tiempo suficiente, trate el frame final como animación
Reglas de tiempo de ejecuciónTimelines pausadas de GSAP, fill-mode both en CSS, autoplay false en Anime, requisitos de registro, patrones prohibidos de timer/random/async
Formas de keyframeKeyframes de array, keyframes de porcentaje, arrays de propiedades, padre ease-none con easing por parada, easeEach para una sensación compartida
CanalesPrefiera canales de compositor/visuales como x/y/scale/opacity; evite canales de layout/ciclo de vida como top/left, width/height, display
Elección de mecanismoTabla que asocia las necesidades con los mecanismos más pequeños: FLIP, recorrido de ruta, dibujo de trazo, interpolación de formas, stagger, subdivisión de texto, 3D
TiemposAnticipación, aceleración, prueba de pico, follow-through, overshoot, elección de ease, desfases de stagger, holds finales, velocidad continua
TextoPreserve las cajas de línea, el espaciado de palabras, la legibilidad, el ajuste final; mueva glifos o bandas enmascaradas; capture frames legibles
SVGDrawSVGPlugin para el crecimiento del trazo, MorphSVGPlugin para la interpolación de formas, convierta primitivas en paths, divida siluetas complejas
3DUse perspective, preserve-3d, recorrido en z, rotación, movimiento de cámara/mundo, oclusión, orden de capas; compruebe la profundidad con ángulos de diagnóstico
Canvas / WebGLAplique keyframes a la cámara, la transformación de objetos, el material, los uniforms del shader; renderice desde el tiempo de HyperFrames; use --ghost para la comprobación

La descripción propia del Skill

"Usar cuando una composición HyperFrames necesita punch-in, punch-out, zoom, reencuadre, tratamiento Ken Burns, movimiento de cámara, transición visual o whip handoff, u otros keyframes 2D/3D seguros para búsqueda; también para GSAP, keyframes CSS, Anime.js, WAAPI, FLIP, paths, masks, morph/draw SVG, text trails, profundidad 3D o diagnósticos `hyperframes keyframes`. No usar para estrategia de escena amplia, diseño de marca, búsqueda de medios, subtítulos o planificación general de video."

Descripción del encabezado en SKILL.md. El archivo completo tiene aproximadamente 15.899 caracteres. Leer el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill hyperframes-keyframes

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Cuál es la diferencia entre este skill y hyperframes-animation?

Este skill se encarga de la implementación de keyframes y la mecánica del movimiento visual. Use hyperframes-animation para recetas de escena amplias y la coreografía de traspaso visual. Use hyperframes-cli para la documentación completa de comandos. Este skill se centra en crear, registrar y verificar los keyframes reales.

HyperFrames Keyframes

Ejecutar hyperframes-keyframes en una tarea real de movimiento y video.

Descarga OpenDesign, importa hyperframes-keyframes desde su enlace SKILL.md, pega el prompt de arriba 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-keyframes

Qué hace el skill hyperframes-keyframes en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el Skill hyperframes-keyframes

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill hyperframes-keyframes da a Claude Code y Codex

Líneas de Tiempo GSAP en Pausa

Anime.js con Autoplay False

Modo de Relleno de CSS Keyframes

Nunca Usar Temporizadores ni Random

Solo Canales Visibles en Keyframes

Preservar la Identidad del Objeto

El Fotograma Final Forma Parte de la Animación

Nombrar Sujetos y Poses