¿Qué hace HyperFrames — comienza aquí?
Esta habilidad es un enrutador local para el framework de video basado en HTML HyperFrames,
reflejado desde heygen-com/hyperframes.
Las habilidades de dominio reflejadas viven como subdirectorios de esta carpeta y se cargan
bajo demanda por nombre. Según la intención del usuario, lee la sub-habilidad correspondiente
SKILL.md antes de ejecutar.
Las guías de agente autorizadas del repositorio original se reflejan junto a este enrutador
como UPSTREAM-CLAUDE.md (catálogo completo de habilidades, instalación, mantenimiento) y
UPSTREAM-AGENTS.md (lista de flujos de trabajo): consúltalas para las descripciones canónicas
de las habilidades originales y el flujo de trabajo npx skills add / npx hyperframes.
HyperFrames renderiza video desde HTML — una composición es un archivo HTML cuyo
DOM declara la sincronización con atributos data-*, cuyo tiempo de ejecución de animación es
buscable, y cuya reproducción multimedia es controlada por el framework. El contrato completo
de autoría vive en hyperframes-core/; léelo antes de escribir HTML de composición.
Índice de sub-habilidades
| Sub-habilidad | Directorio | Usar cuando |
|---|---|---|
| Contrato de composición | hyperframes-core/ | Crear/editar una composición HTML — sincronización data-*, clips, pistas, subcomposiciones, variables. Leer antes de escribir HTML de composición. |
| Bucle de desarrollo CLI | hyperframes-cli/ | Ejecutar npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, renderizado en la nube/lambda, o solucionar problemas del entorno de construcción/renderización. |
| Animación | hyperframes-animation/ | Reglas de movimiento atómico, planos de escena multifase, transiciones de escena, técnicas de diseño de movimiento y adaptadores de tiempo de ejecución (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Fotogramas clave | hyperframes-keyframes/ | Fotogramas clave 2D/3D seguros para búsqueda, líneas de tiempo GSAP, fotogramas clave CSS, Anime.js, WAAPI, FLIP, trayectorias, máscaras, morph/dibujo SVG, texto, profundidad 3D, más diagnósticos hyperframes keyframes. |
| Dirección creativa | hyperframes-creative/ | Dirección creativa no relacionada con animación: frame.md/design.md, paletas, tipografía, narración, planificación de ritmo, audio-reactivo. |
| Multimedia | media-use/ | Resolver/generar BGM, SFX, imagen, icono, logotipo de marca, voz, gradación de color, LUT; locución TTS, transcripción, eliminación de fondo, subtítulos; reutilización entre proyectos. |
| Bloques de registro | hyperframes-registry/ | Instalar y conectar bloques/componentes del registro (hyperframes add). |
| Importación Figma | figma/ | Importar contenido de Figma — activos, tokens, componentes, storyboards → movimiento reconstruido. |
Flujos de trabajo (entregables de principio a fin)
| Flujo de trabajo | Directorio | Usar cuando |
|---|---|---|
| Video general | general-video/ | Flujo de trabajo de respaldo para crear/editar cualquier composición personalizada de cualquier duración/formato — piezas más largas/multi-escena, reels de marca y sizzle. |
| Gráficos en movimiento | motion-graphics/ | Gráfico en movimiento corto y centrado en el diseño donde el movimiento ES el mensaje — tipografía cinética, contador de estadísticas, gráfico/data-viz impactante, sting de logotipo, tercio inferior. |
| Presentación / deck | slideshow/ | Presentación, deck de propuesta o deck interactivo con diapositivas discretas, revelaciones de fragmentos, ramificación, navegación por zonas activas. |
| Lanzamiento de producto | product-launch-video/ | Convertir una URL de producto/marketing, guión pegado o resumen en un video de lanzamiento/promoción de producto. |
| PR a video | pr-to-video/ | Convertir un PR de GitHub (URL, owner/repo#N o "este PR") en un video explicativo de cambio de código. |
| Música a video | music-to-video/ | Convertir una pista de música en un video sincronizado con el ritmo — video lírico, presentación o visualización cinética. |
| Explicador sin rostro | faceless-explainer/ | Convertir texto arbitrario (artículo, notas, tema, resumen) en un video explicativo sin rostro con imágenes inventadas. |
| Subtítulos incrustados | embedded-captions/ | Agregar subtítulos diseñados a un video de persona hablando — identidades visuales detrás de motores de columna/incrustados. |
| Reedición de persona hablando | talking-head-recut/ | Empaquetar un video existente de persona hablando/entrevista/podcast con tarjetas de superposición gráfica temporizadas — títulos, tercios inferiores, llamadas de datos, citas. |
| Puerto Remotion | remotion-to-hyperframes/ | Portar una composición existente de Remotion (React) a HTML de HyperFrames. Usar SOLO si se pide explícitamente portar/convertir/migrar una fuente de Remotion. |
Reglas de enrutamiento
- Para cualquier solicitud de "hazme un video / animación / gráfico en movimiento", elige un
flujo de trabajo de la segunda tabla anterior. Si ninguno encaja, recurre a
general-video. - El flujo de trabajo elegido incorpora habilidades de dominio (primera tabla) durante la ejecución; nunca asumen la tarea completa por sí mismas.
- Contrato de autoría primero: antes de escribir HTML de composición, lee
hyperframes-core/. - Todo se ejecuta a través de
npx hyperframesa menos que las instrucciones del proyecto especifiquen un envoltorio local — obedece exactamente al envoltorio local. Requiere Node.js >= 22 y FFmpeg.
Sincronización
Estas habilidades se reflejan desde el repositorio original. Para verificar o aplicar actualizaciones:
bash hyperframes/scripts/sync-hyperframes.sh --check # simulación
bash hyperframes/scripts/sync-hyperframes.sh # sincronizar con copia de seguridad
Consulta SYNC.md para la fuente original, el commit de última sincronización y la estrategia de sincronización.