remotion-to-hyperframes Skill for Claude: Move Remotion Videos to HyperFrames

Makes Claude port Remotion and other video code into HyperFrames, then check the result frame by frame against the original.

Installs: 553.4K; on skills.sh
Stars: 77.1K; on GitHub
Files: 60+; besides SKILL.md
Updated: Nov 2026; last repo commit

remotion-to-hyperframes brings existing video code into HyperFrames, an open-source tool that turns HTML into MP4. It works at three levels. Native translates Remotion and HTML or GSAP animation into editable HyperFrames. Hosted keeps canvas, p5.js, Three.js or Lottie code and drives it from HyperFrames time. Media uses a rendered file from Manim, After Effects or Blender as a clip.

For Remotion it first runs a bundled lint script, lint_source.py, to catch code that does not translate, such as useState and React UI kits. It then checks the port with npx hyperframes diff, and writes anything lost to TRANSLATION_NOTES.md. It relies on the separate /hyperframes skill for the target format.

Good for

Developers moving Remotion projects to HyperFrames
Teams reusing Lottie, Three.js, p5.js or canvas animation in a HyperFrames video
Anyone who needs proof a port matches the original render

Install remotion-to-hyperframes

Claude Code

Copy this prompt.

Install the remotion-to-hyperframes skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. This skill sends Claude to the main /hyperframes skill for the target format, so install that too. The README says the plugin bundles the full skill catalog, which includes both. The skills CLI command names both skills (a bare npx skills add heygen-com/hyperframes opens a picker with nothing pre-selected). The README lists remotion-to-hyperframes as an on-demand skill: npx hyperframes skills update installs the core set and the second command adds this one.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Native: translate, then verify
Hosted
Media

Key facts

Author: heygen-com (repo owner)
License: Apache-2.0
Installs on skills.sh: 553,445 (Nov 2, 2026)
GitHub stars: 77,112 for the whole heygen-com/hyperframes repo (Nov 2, 2026)
Last commit: Nov 2, 2026
What installs: SKILL.md plus 75 files: 11 reference guides, a 57-file test corpus, the lint_source.py script with 4 test files, and 2 empty .gitkeep placeholders
Needs: The /hyperframes skill from the same repo; Python 3 for the lint script; Node.js for npx hyperframes
Part of: The hyperframes plugin in heygen-com/hyperframes
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
Works in: Claude Code, Codex, Cursor and other coding agents (README)

What it includes

Translates Remotion and HTML/GSAP into editable HyperFrames
One sub-composition per scene, times in seconds, variables kept editable.
Write · Native level
Keeps canvas, p5.js, Three.js, Lottie or WebGL code and drives it by time
HyperFrames owns the clock; no timers as the time source.
Write · Hosted level
Uses a rendered video as a clip
For Manim, After Effects, Blender, PIL or moviepy output.
Write · Media level
Finds Remotion code that will not translate
Blockers include useState, useReducer and React UI kits such as MUI.
Runs code · scripts/lint_source.py
Scores the port against the original, by time or by frame
Reports SSIM, the worst cell per frame, cuts and a sheet of the worst moments.
Runs code · npx hyperframes diff
Searches the registry for a named visual
Runs code · npx hyperframes catalog
Records what did not translate cleanly
Write · TRANSLATION_NOTES.md

From the official docs

Permissions

Medium risk

Claude runs npx and Python commands and writes many files into your project. Work on a branch and check each command before you approve it.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs npx and Python on your machine
The skill calls npx hyperframes and python3 lint_source.py. Check the commands before you approve them.
It writes many files into your project
A port creates compositions, variables and a notes file. Work on a copy or a branch.

Technical details

Scopes	Runs a bundled Python lint script Runs npx hyperframes commands, which download and run a package Writes composition files and TRANSLATION_NOTES.md

Questions

What does remotion-to-hyperframes do?

It makes Claude port Remotion, Lottie, Three.js, p5.js, canvas and plain HTML animation into HyperFrames, then compare the result with the original frame by frame.

How do I install it?

Use the install box at the top of this page. It depends on the main /hyperframes skill, so the commands there install both. The README says the Claude Code plugin bundles the full skill catalog.

Does it need an API key?

The SKILL.md names no API key. It runs npx hyperframes commands and a Python lint script.

What can't be ported?

The SKILL.md says Remotion code with useState, useReducer, useEffect with dependencies, async calculateMetadata or React UI kits is a blocker. Code that depends on wall-clock time, live physics or the network can only come in as media.

Is it safe?

It runs npx and Python commands and writes files in your project, so work on a branch. skills.sh lists Gen Agent Trust Hub, Socket and Snyk as pass.

Does it work in the Claude app, Codex or Cursor?

The HyperFrames README names Claude Code, Codex, Cursor and other coding agents. It does not name the Claude desktop or web app.

Information

updated Nov 2, 2026

Repository: heygen-com/hyperframes
Folder: skills/remotion-to-hyperframes

heygen-com/hyperframes skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

heygen-com/hyperframes README · github.com
remotion-to-hyperframes SKILL.md · github.com
remotion-to-hyperframes on skills.sh · skills.sh