heygen-com/hyperframes

Instalación del plugin: Antes de los comandos de configuración o actualización, sigue las reglas de instalación del plugin cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.

Primero, mantén esta habilidad actualizada — confirma con el usuario antes de ejecutar: npx hyperframes skills update remotion-to-hyperframes. Es una operación rápida sin efectos cuando todo está actualizado; de lo contrario, refresca esta habilidad junto con las habilidades centrales del dominio de las que depende antes de usarlas.

Remotion a HyperFrames

La puerta de entrada es /hyperframes. Usa esto solo para portar una composición Remotion (React) existente a HyperFrames, en un solo sentido. Crear una composición nueva, recrear desde una fuente que no sea Remotion (After Effects, Framer Motion, React/CSS simple — no hay una fuente de Remotion que traducir), una mención pasajera de Remotion, o cualquier incertidumbre → lee /hyperframes primero: la capa de intención decide cada ruta.

Resumen

Traduce composiciones de video basadas en Remotion (React) a composiciones de HyperFrames (HTML + GSAP). La mayoría de los modismos de Remotion tienen equivalentes directos en HyperFrames; la traducción es mecánica para aproximadamente el 80% de las composiciones típicas. Esta habilidad codifica el mapeo y protege contra el 20% restante que puede ser impreciso, al negarse a traducir patrones que no encajan en el modelo dirigido por fotogramas de HF y recomendar el patrón de interoperabilidad en tiempo de ejecución del PR #214 en su lugar.

La habilidad incluye un corpus de pruebas por niveles (T1–T4, 4 casos en total) que califica las traducciones según umbrales de SSIM medidos. No traduzcas sin ejecutar la evaluación — una traducción que "se ve bien" pero que renderiza 0.05 SSIM por debajo de la línea base validada es incorrecta de forma silenciosa.

Cuándo usar

Usa esta habilidad SOLO cuando el usuario solicite explícitamente migrar desde Remotion. Ejemplos de frases desencadenantes:

• "porta mi proyecto de Remotion a HyperFrames"
• "convierte este código de Remotion a HyperFrames"
• "migra desde Remotion"
• "traduce esta composición de Remotion"
• "reescribe esto como HTML de HyperFrames"

NO uses esta habilidad cuando:

• (a) El usuario está creando una composición nueva de HyperFrames, incluso si tiene o está probando A/B un video similar de Remotion.
• (b) El usuario menciona Remotion de pasada sin pedir una migración.
• (c) El usuario comparte código de Remotion como material de referencia y no como solicitud de traducción.
• (d) El usuario pide "el mismo video que mi video de Remotion" sin solicitar explícitamente migrar la fuente — trátalo como una creación nueva de HyperFrames.

NO SOPORTADO (rechaza — esto no es lo que hace esta habilidad):

• La dirección inversa. Exportar una composición de HyperFrames de vuelta a Remotion (o a cualquier otro framework) no es un flujo de trabajo — la traducción es solo de Remotion → HyperFrames. Dilo claramente.
• Fuentes que no son Remotion. Un proyecto de After Effects (.aep), una animación de Framer Motion / React simple / CSS, o la fuente de cualquier otra herramienta no es una composición de Remotion — no hay código fuente de Remotion que traducir. Créala de forma nativa mediante /general-video, o recházala si HyperFrames no puede representarla.

Ante la duda, crea una composición nativa de HyperFrames con /general-video (el flujo general de creación de HyperFrames) en su lugar.

Flujo de trabajo

Paso 1: Revisa la fuente

Ejecuta scripts/lint_source.py sobre el directorio fuente de Remotion. La revisión detecta patrones que no se pueden traducir limpiamente:

• Bloqueantes (rechaza y recomienda interoperabilidad): useState, useReducer, useEffect/useLayoutEffect con dependencias no vacías, calculateMetadata asíncrono, bibliotecas de UI de React de terceros (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI).
• Advertencias (traduce después de eliminar la construcción): configuración de @remotion/lambda, delayRender, useCallback, useMemo, hooks personalizados.
• Información (traduce con nota): staticFile, interpolateColors.

Si se dispara algún bloqueante, detente. Lee references/escape-hatch.md y muestra el mensaje de recomendación. Las advertencias no detienen la traducción — elimina la construcción ofensiva en el paso 3 y anota la brecha en TRANSLATION_NOTES.md. La configuración de @remotion/lambda es el caso canónico de advertencia: la habilidad elimina la importación y las llamadas a renderMediaOnLambda(...) pero traduce el resto de la composición.

Paso 2: Planifica la traducción

Lee references/api-map.md — el índice de cada API de Remotion y su equivalente en HF o referencia por tema. Identifica qué referencias temáticas necesitarás según lo que use la fuente:

La fuente contiene	Carga la referencia
Composition, defaultProps, schema, calculateMetadata	parameters.md
Sequence, Series, Loop, AbsoluteFill, Freeze	sequencing.md
useCurrentFrame, interpolate, spring, Easing, interpolateColors	timing.md
Audio, Video, Img, IFrame, staticFile, delayRender	media.md
TransitionSeries, @remotion/transitions	transitions.md
@remotion/lottie	lottie.md
@remotion/google-fonts/<Family>, Font.loadFont, @font-face	fonts.md

No las cargues todas — carga solo las que necesite la fuente específica.

Busca en el catálogo en vivo cualquier efecto visual que la tabla no mapee. Cuando la fuente muestre un estilo sin un equivalente en la API de HF — una superposición de líneas de escaneo/CRT, un desglose o paso de aberración cromática, un fundido de shader, un tratamiento de grano de película — ejecuta npx hyperframes catalog --query "<el efecto, en inglés simple>" --json antes de escribirlo a mano en GSAP. La búsqueda no necesita nada instalado: ni proyecto, ni add previo, ni cuenta. Clasifica todo el registro alojado (~400 bloques y componentes) desde cualquier directorio, y transitions.md ya sigue esta ruta para clockWipe() / iris() mediante npx hyperframes add sdf-iris. Un componente real está más cerca de la fuente que una aproximación manual, por lo que suele aumentar el SSIM en lugar de reducirlo — pero la diferencia de renderizado en el Paso 4 sigue siendo el árbitro. Escribe el efecto a mano cuando la búsqueda no devuelva nada adecuado, y registra la sustitución en TRANSLATION_NOTES.md en cualquier caso.

Paso 3: Genera la composición HF

Genera index.html con:

• Un <div id="stage"> raíz que lleve el data-composition-id de la composición, data-start="0", data-duration (en segundos), data-fps, data-width, data-height, más un data-* por cada prop escalar.
• Un <div> anfitrión por escena con data-composition-src="compositions/<scene>.html" y data-start / data-duration / data-track-index. La raíz no contiene diseño anidado.
• Un compositions/<scene>.html por escena (una subcomposición <template>): su <style> en línea para el diseño (CSS establece el estado from de cada propiedad animada), su marcado, y una gsap.timeline({paused: true}) en el tiempo local de la escena. Cada derivación de useCurrentFrame() de Remotion se convierte en un tween en esa línea de tiempo en el desplazamiento dentro de la escena.
• window.__timelines["<scene-id>"] = tl; en cada archivo de escena, y window.__timelines["<composition-id>"] para la línea de tiempo (posiblemente vacía) de la raíz.

Los subcomponentes React personalizados se alinean como HTML repetido usando la interfaz de props como plantilla (consulta parameters.md para el patrón data-* por instancia).

Paso 4: Valida

Ejecuta el arnés de evaluación — references/eval.md para la guía completa. Ruta rápida:

# Renderiza la línea base de Remotion (después de npm install en el fixture)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4

# Renderiza la traducción HF
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4

# Diferencia SSIM
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff

Umbral: ~0.02 por debajo de p05 del nivel de complejidad de la fuente (consulta la tabla de umbrales validados de eval.md). Si la diferencia falla, ejecuta scripts/frame_strip.sh para ver qué fotogramas divergieron, luego relee la referencia de tiempo/secuenciación/multimedia relevante.

Crítico: ambos renders deben usar un formato de píxel coincidente. Establece Config.setVideoImageFormat("png") + Config.setColorSpace("bt709") en el remotion.config.ts de la fuente Remotion — de lo contrario, la diferencia mide diferencias del codificador (~0.05 de impacto en SSIM), no la fidelidad de la traducción.

Paso 5: Documenta las brechas

Cualquier cosa que no se haya traducido limpiamente (rampas de volumen eliminadas, presentaciones personalizadas aproximadas, fuentes sustituidas) se registra en un archivo TRANSLATION_NOTES.md escrito junto al resultado de HF. Consulta references/limitations.md para el formato.

Qué esta habilidad NO hace explícitamente

• Traducir máquinas de estado de React. Las composiciones que impulsan la animación mediante useState + useEffect no son objetivos deterministas de captura de fotogramas en el modelo dirigido por fotogramas de HyperFrames. Recomienda el patrón de interoperabilidad en tiempo de ejecución.
• Ejecutar el pipeline de renderizado de Remotion junto a HyperFrames. Ese es el patrón de interoperabilidad en tiempo de ejecución del PR #214 — una solución separada para composiciones que fallan la revisión de esta habilidad.

(@remotion/lambda no es un bloqueante — la configuración de Lambda es despliegue, no animación. La habilidad lo elimina como advertencia y traduce el resto. Consulta references/escape-hatch.md.)

Cómo calificar tu propia traducción

Ejecuta el orquestador del corpus de pruebas:

./assets/test-corpus/run.sh

Ejecuta T1, T2, T3 (renderizado + diferencia) y T4 (validación de lint), imprime una tabla de aprobado/reprobado por nivel y genera un informe JSON agregado. Úsalo para verificar que la habilidad funciona de extremo a extremo en una copia limpia — y como comprobación de regresión después de editar cualquier referencia.

Línea base validada (a fecha de 2026-04-27):

Nivel	Forma de la composición	SSIM medio	Umbral
T1	aparición de un solo elemento	0.974	0.95
T2	multi-escena + spring + audio + imagen	0.985	0.95
T3	basada en datos, subcomponentes personalizados, contador	0.953	0.90
T4	escape-hatch (8 casos de lint)	8/8 pass	n/a