# Remotion To Hyperframes

> Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

Source: https://skillsagentes.com/skills/heygen-com/hyperframes/remotion-to-hyperframes
Repository: https://github.com/heygen-com/hyperframes
Author: heygen-com
License: Apache-2.0
Updated: hace 10 días
Context cost: 84 tok installed, 2.4k tok once triggered, 42.9k tok with every bundled file
Bundle: 70 files, 168 KB
Permissions requested: none declared

## Install

```bash
npx -y skills add heygen-com/hyperframes --skill remotion-to-hyperframes --agent claude-code
```

## What it does

- Traduce composiciones Remotion (React) al formato HTML + GSAP de HyperFrames, mapeando APIs con referencias por tema
- Analiza el código fuente con scripts/lint_source.py para detectar patrones bloqueantes o problemáticos antes de traducir
- Genera un index.html con timeline GSAP pausado y data-* que reproduce el comportamiento de useCurrentFrame
- Valida la traducción comparando SSIM entre el render de Remotion y el de HyperFrames
- Documenta las brechas de traducción en TRANSLATION_NOTES.md

## Use it when

- El usuario pide explícitamente portar, convertir, migrar o traducir una composición Remotion a HyperFrames
- El usuario pide 'rewrite this as HyperFrames HTML' u otra frase equivalente de migración

## Don't bother when

- El usuario está creando una composición nueva, aunque tenga un video Remotion similar como referencia
- El usuario menciona Remotion de pasada o lo comparte solo como código de referencia
- La fuente no es Remotion (After Effects, Framer Motion, React/CSS plano) o se pide exportar de HyperFrames a Remotion

## What triggers it

- "Porta mi proyecto de Remotion a HyperFrames"
- "Convierte este código de Remotion a HyperFrames"
- "Migra esta composición desde Remotion"
- "Traduce este comp de Remotion"
- "Reescribe esto como HTML de HyperFrames"

## Before you install

- Requiere el corpus de pruebas y el harness de evaluación (npx remotion, npx hyperframes) para validar con SSIM antes de dar por buena la traducción.
- Needs on PATH: ffmpeg, npx, python3
- Environment: BASELINE, BASH_SOURCE, BLOCKERS, DIFF_MEAN, INFOS, MEAN, OUTDIR, PASS, R2HF_SSIM_THRESHOLD, SAMPLES, SCRIPTS_DIR, SSIM_LOG, SUMMARY, THIS_DIR, THRESHOLD, TRANSLATED, WORK

## Files

- SKILL.md — 9 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

Reproduced verbatim from heygen-com/hyperframes under Apache-2.0. This section is the upstream document and is in English.

> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update remotion-to-hyperframes`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.

# Remotion to HyperFrames

> **The front door is `/hyperframes`.** Use this **only** to port an existing **Remotion** (React) composition's source into HyperFrames, one way. Authoring a **new** composition, re-creating from a non-Remotion source (After Effects, Framer Motion, plain React / CSS — there is no Remotion source to translate), a passing Remotion mention, or any uncertainty → read `/hyperframes` first: the intent layer owns every route decision.

## 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/<Family>`, `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 `<div id="stage">` 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 `<style>` for layout; CSS sets the `from` state of every animated property.
- A single `<script>` tag at the bottom containing one paused `gsap.timeline({paused: true})`. Every Remotion `useCurrentFrame()` derivation becomes a tween on this timeline at the right offset.
- `window.__timelines["<composition-id>"] = tl;` registers the timeline with HF's runtime.

Custom React subcomponents inline as repeated HTML using the prop interface as the template (see [`parameters.md`](references/parameters.md) for the per-instance `data-*` pattern).

### Step 4: Validate

Run the eval harness — [`references/eval.md`](references/eval.md) for the full guide. Quick path:

```bash
# Render Remotion baseline (after npm install in the fixture)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4

# Render HF translation
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4

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

Threshold: ~0.02 below `p05` of the source's complexity tier (see `eval.md`'s validated thresholds table). If the diff fails, run [`scripts/frame_strip.sh`](scripts/frame_strip.sh) to see _which_ frames diverged, then re-read the relevant timing/sequencing/media reference.

**Critical**: both renders must use matching pixel format. Set `Config.setVideoImageFormat("png")` + `Config.setColorSpace("bt709")` in the Remotion source's `remotion.config.ts` — otherwise the diff measures encoder differences (~0.05 SSIM hit), not translation fidelity.

### Step 5: Document gaps

Anything that didn't translate cleanly (volume ramps dropped, custom presentations approximated, fonts substituted) gets a `TRANSLATION_NOTES.md` written next to the HF output. See [`references/limitations.md`](references/limitations.md) for the format.

## What this skill explicitly does NOT do

- **Translate React state machines.** Compositions that drive animation via `useState` + `useEffect` are not deterministic frame-capture targets in HyperFrames' seek-driven model. Recommend the runtime interop pattern.
- **Run Remotion's render pipeline alongside HyperFrames.** That's the runtime interop pattern from [PR #214](https://github.com/heygen-com/hyperframes/pull/214) — a separate solution for compositions that fail this skill's lint.

(`@remotion/lambda` is _not_ a blocker — Lambda config is deployment, not animation. The skill drops it as a warning and translates the rest. See [`references/escape-hatch.md`](references/escape-hatch.md).)

## How to grade your own translation

Run the test corpus orchestrator:

```bash
./assets/test-corpus/run.sh
```

It runs T1, T2, T3 (render + diff) and T4 (lint validation), prints a per-tier pass/fail table, and emits an aggregate JSON report. Use this to verify the skill is working end-to-end on a clean checkout — and as a regression check after editing any reference.

Validated baseline (as of 2026-04-27):

| Tier | Composition shape                           | Mean SSIM | Threshold |
| ---- | ------------------------------------------- | --------- | --------- |
| T1   | single-element fade-in                      | 0.974     | 0.95      |
| T2   | multi-scene + spring + audio + image        | 0.985     | 0.95      |
| T3   | data-driven, custom subcomponents, count-up | 0.953     | 0.90      |
| T4   | escape-hatch (8 lint cases)                 | 8/8 pass  | n/a       |

---

Skills Agentes — https://skillsagentes.com/skills/heygen-com/hyperframes/remotion-to-hyperframes