# Remotion To Hyperframes > Porta una composición de Remotion (React) a HTML de HyperFrames. Úsalo solo cuando el usuario pida explícitamente portar, convertir o migrar una fuente de Remotion. Fuente: https://skillsagentes.com/skills/calesthio/openmontage/remotion-to-hyperframes Markdown: https://skillsagentes.com/skills/calesthio/openmontage/remotion-to-hyperframes.md Repositorio: https://github.com/calesthio/OpenMontage Autor: calesthio Licencia: AGPL-3.0 Actualizado: el mes pasado Coste de contexto: 223 tok instalada, 2.5k tok al activarse, 43k tok con todos los archivos del bundle Bundle: 70 archivos, 168 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent claude-code # Cursor npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent cursor # Codex npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent codex # Gemini CLI npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent gemini # Windsurf npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent windsurf # Cline npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframes --agent cline ``` ## Qué hace - Traduce composiciones de Remotion, en React, a composiciones de HyperFrames en HTML y GSAP; alrededor del 80% de los idiomas típicos tienen equivalente directo - Sigue cinco pasos: lintar la fuente, planificar, generar la composición, validar y documentar carencias - Valida contra un corpus de test por niveles (T1-T4) midiendo SSIM frente al render de Remotion - Señala patrones no soportados: `useState`, `useEffect`, `calculateMetadata` asíncrono y librerías React de terceros - Recomienda interoperabilidad en tiempo de ejecución antes que una traducción con pérdidas ## Cuándo usarla - El usuario pide explícitamente portar, convertir o migrar una fuente de Remotion a HyperFrames ## Cuándo no - Se está creando una composición HyperFrames nueva, o solo se menciona Remotion de pasada o como referencia - El usuario pide "el mismo vídeo que el de Remotion" sin pedir migrar: trátalo como build desde cero - La dirección inversa, o fuentes que no son Remotion — After Effects, Framer Motion, React o CSS planos ## Qué la activa - "Porta mi proyecto de Remotion a HyperFrames" - "Convierte este código de Remotion a HyperFrames" - "Migra esta composición de Remotion" ## Antes de instalar - No traduzcas sin pasar la evaluación: el corpus de test mide SSIM contra el render de Remotion, así que una traducción que "parece bien" no basta. - Necesita en el PATH: ffmpeg, npx, python3 - Variables de entorno: BASELINE, BASH_SOURCE, BLOCKERS, DIFF_MEAN, INFOS, MEAN, OUTDIR, PASS, R2HF_SSIM_THRESHOLD, SAMPLES, SCRIPTS_DIR, SSIM_LOG, SUMMARY, THIS_DIR, THRESHOLD, TRANSLATED, WORK - reads environment config ## Archivos - SKILL.md — 10 KB - assets/.gitkeep — 0 B - assets/test-corpus/.gitignore — 16 B - assets/test-corpus/run.sh — 8 KB - assets/test-corpus/tier-1-title-card/.gitignore — 128 B - assets/test-corpus/tier-1-title-card/README.md — 2 KB - assets/test-corpus/tier-1-title-card/expected.json — 2 KB - assets/test-corpus/tier-1-title-card/hf-src/index.html — 2 KB - assets/test-corpus/tier-1-title-card/remotion-src/package.json — 296 B - assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts — 497 B - assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx — 259 B - assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx — 773 B - assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts — 109 B - assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json — 337 B - assets/test-corpus/tier-2-multi-scene/.gitignore — 215 B - assets/test-corpus/tier-2-multi-scene/README.md — 3 KB - assets/test-corpus/tier-2-multi-scene/expected.json — 2 KB - assets/test-corpus/tier-2-multi-scene/hf-src/index.html — 4 KB - assets/test-corpus/tier-2-multi-scene/remotion-src/package.json — 298 B - assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts — 497 B - assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx — 2 KB - assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx — 264 B - assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts — 109 B - assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json — 337 B - assets/test-corpus/tier-2-multi-scene/setup.sh — 1 KB - assets/test-corpus/tier-3-data-driven/.gitignore — 128 B - assets/test-corpus/tier-3-data-driven/README.md — 5 KB - assets/test-corpus/tier-3-data-driven/expected.json — 3 KB - assets/test-corpus/tier-3-data-driven/hf-src/index.html — 9 KB - assets/test-corpus/tier-3-data-driven/remotion-src/package.json — 319 B - assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts — 497 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx — 681 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx — 970 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx — 740 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx — 1 KB - assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx — 1 KB - assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts — 109 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx — 423 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx — 676 B - assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx — 1 KB - assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json — 337 B - assets/test-corpus/tier-4-escape-hatch/README.md — 3 KB - assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx — 1000 B - assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx — 954 B - assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx — 1 KB - assets/test-corpus/tier-4-escape-hatch/expected.json — 3 KB - assets/test-corpus/tier-4-escape-hatch/validate.sh — 3 KB - references/api-map.md — 12 KB - references/escape-hatch.md — 5 KB - references/eval.md — 5 KB - references/fonts.md — 3 KB - references/limitations.md — 5 KB - references/lottie.md — 4 KB - references/media.md — 4 KB - references/parameters.md — 5 KB - references/sequencing.md — 5 KB - references/timing.md — 6 KB - references/transitions.md — 4 KB - scripts/.gitkeep — 0 B - scripts/frame_strip.sh — 4 KB - scripts/lint_source.py — 12 KB - scripts/render_diff.sh — 3 KB - scripts/tests/fixtures/blocker.tsx — 2 KB - scripts/tests/fixtures/clean.tsx — 1 KB - scripts/tests/smoke.sh — 4 KB ## SKILL.md Reproducido tal cual desde calesthio/OpenMontage bajo AGPL-3.0. Esta sección es el documento original y está en inglés. # Remotion to HyperFrames > **Confirm the route before you build.** Use this **only** to port an existing **Remotion** (React) composition's source into HyperFrames. Authoring a **new** composition (even one inspired by a Remotion video) → the creation workflows / `/general-video`. **Out of scope** (one-way, Remotion-only): no reverse export (HyperFrames → Remotion or any framework), and a **non-Remotion** source (After Effects, Framer Motion, plain React / CSS) has no Remotion source to translate → re-create via `/general-video`. Unsure, or only a passing Remotion mention? **Read `/hyperframes` first.** ## Overview Translate Remotion (React-based) video compositions into HyperFrames (HTML + GSAP) compositions. Most Remotion idioms have direct HyperFrames equivalents — the translation is mechanical for ~80% of typical compositions. This skill encodes the mapping and guards against the lossy 20% by refusing to translate patterns that don't fit HF's seek-driven model and recommending the runtime interop pattern from [PR #214](https://github.com/heygen-com/hyperframes/pull/214) instead. The skill ships with a **tiered test corpus** (T1–T4, 4 fixtures total) that grades translations against measured SSIM thresholds. Don't translate without running the eval — a translation that "looks right" but renders 0.05 SSIM lower than the validated baseline is silently wrong. ## When to use **Use this skill ONLY when the user explicitly asks to migrate from Remotion.** Example trigger phrases: - "port my Remotion project to HyperFrames" - "convert this Remotion code to HyperFrames" - "migrate from Remotion" - "translate this Remotion comp" - "rewrite this as HyperFrames HTML" **Do NOT use this skill when:** - (a) The user is authoring a **new** HyperFrames composition, even if they have or are A/B-testing a similar Remotion video. - (b) The user mentions Remotion in passing without asking for migration. - (c) The user shares Remotion code as reference material rather than asking for a translation. - (d) The user asks for "the same video as my Remotion one" without explicitly asking to migrate the source — treat that as a fresh HyperFrames build. **NOT SUPPORTED (decline — this is not what this skill does):** - **The reverse direction.** Exporting a HyperFrames composition back out _to_ Remotion (or to any other framework) is not a workflow — the translation is Remotion → HyperFrames only. Say so plainly. - **Non-Remotion sources.** An After Effects project (`.aep`), a Framer Motion / plain-React / CSS animation, or any other tool's source is not a Remotion composition — there is no Remotion source to translate. Re-create it natively via `/general-video`, or decline if HyperFrames can't represent it. When in doubt, default to authoring a native HyperFrames composition with `/general-video` (the general HyperFrames authoring flow) instead. ## Workflow ### Step 1: Lint the source Run [`scripts/lint_source.py`](scripts/lint_source.py) over the Remotion source directory. The lint detects patterns that can't translate cleanly: - **Blockers** (refuse + recommend interop): `useState`, `useReducer`, `useEffect`/`useLayoutEffect` with non-empty deps, async `calculateMetadata`, third-party React UI libraries (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI). - **Warnings** (translate after dropping the construct): `@remotion/lambda` config, `delayRender`, `useCallback`, `useMemo`, custom hooks. - **Info** (translate with note): `staticFile`, `interpolateColors`. If any blocker fires, **stop**. Read [`references/escape-hatch.md`](references/escape-hatch.md) and surface the recommendation message. Warnings don't stop translation — drop the offending construct in step 3 and note the gap in `TRANSLATION_NOTES.md`. `@remotion/lambda` config is the canonical warning case: the skill drops the import + `renderMediaOnLambda(...)` calls but translates the rest of the composition. ### Step 2: Plan the translation Read [`references/api-map.md`](references/api-map.md) — the index of every Remotion API and its HF equivalent or per-topic reference. Identify which topic references you'll need based on what the source uses: | Source contains | Load reference | | ------------------------------------------------------------------------- | --------------------------------------------- | | `Composition`, `defaultProps`, `schema`, `calculateMetadata` | [`parameters.md`](references/parameters.md) | | `Sequence`, `Series`, `Loop`, `AbsoluteFill`, `Freeze` | [`sequencing.md`](references/sequencing.md) | | `useCurrentFrame`, `interpolate`, `spring`, `Easing`, `interpolateColors` | [`timing.md`](references/timing.md) | | `Audio`, `Video`, `Img`, `IFrame`, `staticFile`, `delayRender` | [`media.md`](references/media.md) | | `TransitionSeries`, `@remotion/transitions` | [`transitions.md`](references/transitions.md) | | `@remotion/lottie` | [`lottie.md`](references/lottie.md) | | `@remotion/google-fonts/`, `Font.loadFont`, `@font-face` | [`fonts.md`](references/fonts.md) | Don't load all of them — load only what the specific source needs. ### Step 3: Generate the HF composition Emit `index.html` with: - Root `
` carrying the composition's `data-composition-id`, `data-start="0"`, `data-duration` (in seconds), `data-fps`, `data-width`, `data-height`, plus one `data-*` per scalar prop. - A flat list of scene divs with `data-start` / `data-duration` / `data-track-index`. - Inline `