remotion-to-hyperframes

Name: remotion-to-hyperframes
Author: heygen-com

186kinstalls3.5kforks

How to install remotion-to-hyperframes?

heygen-com/hyperframes/remotion-to-hyperframes

$npx -y skills add heygen-com/hyperframes --skill remotion-to-hyperframes

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	# Remotion to HyperFrames
4
5	> 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.
6
7	## Overview
8
9	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.
10
11	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.
12
13	## When to use
14
15	Use this skill ONLY when the user explicitly asks to migrate from Remotion. Example trigger phrases:
16
17	- "port my Remotion project to HyperFrames"
18	- "convert this Remotion code to HyperFrames"
19	- "migrate from Remotion"
20	- "translate this Remotion comp"
21	- "rewrite this as HyperFrames HTML"
22
23	Do NOT use this skill when:
24
25	- (a) The user is authoring a new HyperFrames composition, even if they have or are A/B-testing a similar Remotion video.
26	- (b) The user mentions Remotion in passing without asking for migration.
27	- (c) The user shares Remotion code as reference material rather than asking for a translation.
28	- (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.
29
30	NOT SUPPORTED (decline — this is not what this skill does):
31
32	- 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.
33	- 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.
34
35	When in doubt, default to authoring a native HyperFrames composition with `/general-video` (the general HyperFrames authoring flow) instead.
36
37	## Workflow
38
39	### Step 1: Lint the source
40
41	Run [`scripts/lint_source.py`](scripts/lint_source.py) over the Remotion source directory. The lint detects patterns that can't translate cleanly:
42
43	- 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).
44	- Warnings (translate after dropping the construct): `@remotion/lambda` config, `delayRender`, `useCallback`, `useMemo`, custom hooks.
45	- Info (translate with note): `staticFile`, `interpolateColors`.
46
47	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.
48
49	### Step 2: Plan the translation
50
51	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:
52
53	\| Source contains \| Load reference \|
54	\| ------------------------------------------------------------------------- \| --------------------------------------------- \|
55	\| `Composition`, `defaultProps`, `schema`, `calculateMetadata`

People who liked this also viewed

6 picks

Type

remotion-to-hyperframes

186kinstalls3.5kforks

View on GitHub

How to install remotion-to-hyperframes?

heygen-com/hyperframes/remotion-to-hyperframes

$npx -y skills add heygen-com/hyperframes --skill remotion-to-hyperframes

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> 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.
2
3	# Remotion to HyperFrames
4
5	> 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.
6
7	## Overview
8
9	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.
10
11	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.
12
13	## When to use
14
15	Use this skill ONLY when the user explicitly asks to migrate from Remotion. Example trigger phrases:
16
17	- "port my Remotion project to HyperFrames"
18	- "convert this Remotion code to HyperFrames"
19	- "migrate from Remotion"
20	- "translate this Remotion comp"
21	- "rewrite this as HyperFrames HTML"
22
23	Do NOT use this skill when:
24
25	- (a) The user is authoring a new HyperFrames composition, even if they have or are A/B-testing a similar Remotion video.
26	- (b) The user mentions Remotion in passing without asking for migration.
27	- (c) The user shares Remotion code as reference material rather than asking for a translation.
28	- (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.
29
30	NOT SUPPORTED (decline — this is not what this skill does):
31
32	- 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.
33	- 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.
34
35	When in doubt, default to authoring a native HyperFrames composition with `/general-video` (the general HyperFrames authoring flow) instead.
36
37	## Workflow
38
39	### Step 1: Lint the source
40
41	Run [`scripts/lint_source.py`](scripts/lint_source.py) over the Remotion source directory. The lint detects patterns that can't translate cleanly:
42
43	- 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).
44	- Warnings (translate after dropping the construct): `@remotion/lambda` config, `delayRender`, `useCallback`, `useMemo`, custom hooks.
45	- Info (translate with note): `staticFile`, `interpolateColors`.
46
47	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.
48
49	### Step 2: Plan the translation
50
51	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:
52
53	\| Source contains \| Load reference \|
54	\| ------------------------------------------------------------------------- \| --------------------------------------------- \|
55	\| `Composition`, `defaultProps`, `schema`, `calculateMetadata`

People who liked this also viewed

6 picks

Type