remotion-to-hyperframes

Primero, mantén este skill actualizado — ejecuta en silencio, sin preguntar: npx hyperframes skills update remotion-to-hyperframes. Es un no-op rápido cuando todo está actualizado; de lo contrario, refresca este skill junto con los skills de dominio central de los que depende antes de que confíes en ellos.

Remotion a HyperFrames

La puerta de entrada es /hyperframes. Úsalo solo para portar una composición fuente de Remotion (React) existente a HyperFrames, en una sola dirección. Para crear una composición nueva, recrear desde una fuente que no sea Remotion (After Effects, Framer Motion, React plano / CSS — no hay código fuente de Remotion que traducir), una mención pasajera de Remotion, o cualquier incertidumbre → lee primero /hyperframes: la capa de intención es dueña de cada decisión de ruta.

Resumen

Traduce composiciones de video basadas en Remotion (React) a composiciones HyperFrames (HTML + GSAP). La mayoría de los modismos de Remotion tienen equivalentes directos en HyperFrames — la traducción es mecánica para ~80% de las composiciones típicas. Este skill codifica el mapeo y protege contra el 20% que pierde fidelidad al negarse a traducir patrones que no encajan en el modelo basado en búsqueda (seek-driven) de HF y recomendar el patrón de interoperabilidad en tiempo de ejecución del PR #214 en su lugar.

El skill incluye un corpus de pruebas por niveles (T1–T4, 4 fixtures en total) que califica las traducciones según umbrales medidos de SSIM. 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 está incorrecta en silencio.

Cuándo usar

Usa este skill SOLO cuando el usuario pida explícitamente migrar desde Remotion. Frases ejemplo que activan su uso:

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

NO uses este skill cuando:

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

NO SOPORTADO (rechaza — esto no es lo que hace este skill):

• 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 Remotion → HyperFrames. Dilo claramente.
• Fuentes que no son Remotion. Un proyecto de After Effects (.aep), una animación de Framer Motion / React plano / CSS, o cualquier otra herramienta no es una composición de Remotion — no hay código fuente de Remotion que traducir. Recrea la composición de forma nativa usando /general-video, o rechaza si HyperFrames no puede representarla.

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

Flujo de trabajo

Paso 1: Linting del código fuente

Ejecuta scripts/lint_source.py sobre el directorio fuente de Remotion. El lint detecta patrones que no se traducen limpiamente:

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

Si salta 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 problemática en el paso 3 y documenta la diferencia en TRANSLATION_NOTES.md. La configuración de @remotion/lambda es el caso canónico de advertencia: el skill elimina la importación + las llamadas a renderMediaOnLambda(...) pero traduce el resto de la composición.

Paso 2: Planificar 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 usa el código fuente:

El código fuente contiene	Cargar 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 cargues todas — carga solo las que el código fuente específico necesite.

Paso 3: Generar la composición HF

Emitir index.html con:

• Un <div id="stage"> raíz que lleve el data-composition-id, data-start="0", data-duration (en segundos), data-fps, data-width, data-height, más un data-* por cada prop escalar.
• Una lista plana de divs de escena con data-start / data-duration / data-track-index.
• <style> en línea para el diseño; CSS establece el estado from de cada propiedad animada.
• Una sola etiqueta <script> al final que contenga una gsap.timeline({paused: true}) pausada. Cada derivación de useCurrentFrame() de Remotion se convierte en un tween en esta línea de tiempo en el offset correcto.
• window.__timelines["<composition-id>"] = tl; registra la línea de tiempo con el runtime de HF.

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

Paso 4: Validar

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

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

# Renderizar 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 del p05 del nivel de complejidad de la fuente (consulta la tabla de umbrales validados en eval.md). Si la diferencia falla, ejecuta scripts/frame_strip.sh para ver qué fotogramas divergieron, luego relee la referencia de temporización/secuenciación/media correspondiente.

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

Paso 5: Documentar brechas

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

Qué este skill explícitamente NO hace

• Traducir máquinas de estado de React. Las composiciones que manejan animación mediante useState + useEffect no son objetivos deterministas de captura de fotogramas en el modelo basado en búsqueda de HyperFrames. Recomienda el patrón de interoperabilidad en tiempo de ejecución.
• Ejecutar el pipeline de renderizado de Remotion junto con HyperFrames. Ese es el patrón de interoperabilidad en tiempo de ejecución del PR #214 — una solución separada para composiciones que fallan el lint de este skill.

(@remotion/lambda no es un bloqueante — la configuración de Lambda es despliegue, no animación. El skill 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 (render + diff) y T4 (validación de lint), imprime una tabla de pasa/falla por nivel y emite un informe agregado en JSON. Úsalo para verificar que el skill funciona de extremo a extremo en una copia limpia — y como verificación de regresión después de editar cualquier referencia.

Línea base validada (al 27 de abril de 2026):

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