Remotion to HyperFrames skill: port existing video code with your agent

Source: heygen-com/hyperframes · Maintainer: HeyGen · License: Apache-2.0 · Checked: 24 October 2026

What is the remotion-to-hyperframes skill?

The remotion-to-hyperframes skill teaches a coding agent to bring existing video work into HyperFrames and prove it matches the original, frame by frame. Remotion is the main target, but the skill also handles Motion Canvas, Lottie, Three.js, p5.js, canvas and plain HTML or CSS animation, plus finished renders from tools such as Manim, After Effects or Blender.

Its description reads: "Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool."

HyperFrames is HeyGen's open-source framework for rendering HTML compositions to MP4. Its README says it "is inspired by Remotion," and that the main difference is authoring: React components in Remotion, plain HTML in HyperFrames. The README files this skill under "On demand" rather than the core set. Its skills.sh page listed about 500,000 installs (snapshot, 24 October 2026), first seen on 28 April 2026.

What does it do?

The SKILL.md is about 49 lines. Behind it sit 11 reference files, three scripts and a tiered test corpus of sample compositions.

Three import levels. The core idea is to bring each part in "at the highest level it supports and record which level you used":

Code that depends on wall-clock time, live physics or the network can only come in as media.

Native translation in five steps.

1. For Remotion, run the bundled lint_source.py first. Blockers such as useState, useReducer, useEffect with dependencies, async calculateMetadata and React UI kits "don't translate: host them or refactor them out, never approximate."
2. Translate to the HyperFrames contract: one sub-composition per scene, times in seconds (frame / fps), root-relative asset paths. The API map reference gives each Remotion API's equivalent.
3. Keep it editable: Remotion props become composition variables, each Sequence becomes a timed clip or sub-composition, and a reused component becomes one sub-composition mounted several times.
4. Compare frame by frame with npx hyperframes snapshot --at <t,…> --against <original.mp4>, sampling every scene and both sides of every cut.
5. Write anything that didn't translate cleanly, such as dropped volume ramps or substituted fonts, to TRANSLATION_NOTES.md.

Scored checks. For a number rather than a look, scripts/render_diff.sh computes SSIM (a measure of structural similarity between images) per frame between two MP4s, and scripts/frame_strip.sh shows which frames diverged. The eval reference lists calibrated pass thresholds of 0.95 for simple and multi-scene compositions and 0.90 for data-driven ones.

Hosted code. For canvas or WebGL work, HyperFrames "owns the clock": the code draws whatever frame it is asked for. No requestAnimationFrame loop or timer as the time source, and seeded randomness only.

At the end the agent lists each imported part with its level, what you can change in Studio, and how the frame comparison came out.

How do you install it?

skills.sh gives this command (the HyperFrames vs Remotion guide uses the short form heygen-com/hyperframes):

npx skills add https://github.com/heygen-com/hyperframes --skill remotion-to-hyperframes

The README documents an on-demand install from the current main branch, which avoids the registry copy that "can lag main by hours":

npx hyperframes skills update remotion-to-hyperframes

The skill relies on the main /hyperframes skill for the composition contract and on /hyperframes-cli for snapshot and render, so install the core set too with npx hyperframes skills update.

Claude Code plugin. The plugin bundles every published HyperFrames skill, this one included:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

See Claude Code's plugin docs and skills docs. For other agents, see Codex skills and Cursor skills.

You need Node.js 22 or later and FFmpeg to render, per the README. The lint script runs with python3.

How do you use it?

Point the agent at the source and, ideally, a render of the original. The skill is model-invoked when you ask to port, convert or migrate video work.

Example prompts (suggestions, not quotes from the repo):

• Use /remotion-to-hyperframes to port the composition in ./remotion-src/src to HyperFrames. Lint it first and tell me about any blockers before translating.
• Port this Remotion intro and compare it frame by frame against out/intro.mp4. Report the SSIM summary.
• Bring the Three.js particle scene in ./scene into a HyperFrames video as hosted code, driven by the timeline.
• I have a Manim render at assets/proof.mp4. Add it as a clip in scene 3 of the project.
• Translate this Remotion component and expose the title and colour props as variables I can edit.

The docs guide describes the flow the same way: install the skill, "Then ask your agent to port the composition."

Tips and limits

From the skill, its references and the HyperFrames docs, not from testing:

• It refuses rather than guesses. The docs say code it can't translate gets "flagged instead of silently mistranslated." Expect a list of blockers on React-heavy projects.
• Render the original carefully. The skill says to render the Remotion side with PNG frames and the bt709 colour space, "or the diff measures the encoders."
• Audio can differ while video passes. The limitations reference notes that a dropped volume ramp "produces audibly different output but visually-identical video, so SSIM passes," so check the notes file.
• Stateful loops. A Loop whose children keep state between iterations, such as a counter, won't reproduce identically.
• Check the catalog first. Before hand-building a visual the source used, the skill searches the HyperFrames catalog with npx hyperframes catalog --query.

All three security audits on skills.sh (Gen Agent Trust Hub, Socket and Snyk) showed Pass on 24 October 2026. Under Apache-2.0 you can copy and modify the skill if you keep the license and notices.

Save it in your Kipt library

In Kipt, open Skills and paste the GitHub folder link into the import box. Kipt reads the SKILL.md with its references/, scripts/ and assets/ folders. Because heygen-com/hyperframes holds several skills, Kipt shows a list so you can take the core set at the same time. Your copies live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with HeyGen, Remotion or the HyperFrames project.

Similar skills

• HyperFrames skill: the contract your ported code must follow.
• Remotion skill: stay in React and keep building with Remotion.
• HyperFrames CLI skill: snapshot, check and render used in every port.
• HyperFrames registry skill: ready-made effects to replace hand-built ones.
• GSAP core skill: the animation library native ports translate into.