Remotion To Hyperframes
Explicitly migrate an existing Remotion React composition into a seek-driven HyperFrames HTML+GSAP composition without lossy hacks on unsupported patterns.
Overview
Remotion to HyperFrames is an agent skill for the Build phase that translates an existing Remotion composition into HyperFrames when the user explicitly requests a port—not for new HyperFrames builds.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill remotion-to-hyperframesWhat is this skill?
- Strict invoke gate: only when user explicitly asks to port, convert, migrate, or translate Remotion to HyperFrames
- Encodes ~80% mechanical mapping from Remotion idioms to HyperFrames equivalents
- Detects lossy patterns: useState, useEffect side effects, async calculateMetadata, third-party React libs, @remotion/lam
- Recommends runtime interop escape hatch (PR #214) instead of broken translation
- Tiered translation workflow bundled in the skill for systematic porting
- ~80% of typical compositions map mechanically
- tiered translation workflow in skill
Adoption & trust: 64.6k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a working Remotion project but need HyperFrames’ seek-driven HTML/GSAP model, and a blind rewrite will break on React-only patterns Remotion allowed.
Who is it for?
Builders who own Remotion source and asked clearly to migrate it to HyperFrames for preview/render parity.
Skip if: New HyperFrames videos, casual Remotion mentions, reference-only snippets, or “same video” requests without an explicit migrate intent—use the hyperframes skill instead.
When should I use this skill?
User explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames; otherwise default to hyperframes.
What do I get? / Deliverables
You get a mapped HyperFrames composition where idioms fit, plus explicit interop recommendations where translation would be lossy instead of a broken partial port.
- HyperFrames composition with Remotion-to-HF idiom mapping
- Documented unsupported-pattern report with interop recommendations
Recommended Skills
Journey fit
Migration sits in Build when you are wiring or converting a video pipeline—not when you are only ideating format. Remotion-to-HyperFrames is a cross-runtime integration task between two programmatic video stacks, which fits build → integrations.
How it compares
A migration playbook with refusal rules—not a general HyperFrames authoring or Remotion editing skill.
Common Questions / FAQ
Who is remotion-to-hyperframes for?
Solo builders and indie teams with existing Remotion compositions who deliberately want HyperFrames as the target runtime for programmatic video.
When should I use remotion-to-hyperframes?
Only during Build integrations when the user explicitly says port, convert, migrate, translate, or rewrite Remotion as HyperFrames—not when starting fresh or only sharing Remotion as inspiration.
Is remotion-to-hyperframes safe to install?
Review the Security Audits panel on this Prism page and read the skill’s repo source; do not assume install safety from marketing copy alone.
Workflow Chain
Requires first: skill heygen com hyperframes hyperframes
Then invoke: skill heygen com hyperframes css animations
SKILL.md
READMESKILL.md - Remotion To Hyperframes
# Remotion to HyperFrames ## 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. When in doubt, default to authoring a native HyperFrames composition with the `hyperframes` skill 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