# Remotion To HyperFrames

Ports Remotion and other animation code into HyperFrames, checked frame by frame.

- Repository: https://github.com/heygen-com/hyperframes (77062 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -a claude-code -y`
Codex: `npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -a codex -y`
Cursor: `npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -a cursor -y`
Gemini CLI: `npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add heygen-com/hyperframes`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.

# Import into HyperFrames

HyperFrames is the container: its tracks, sub-compositions and variables are editable in Studio whatever runs inside a clip. Bring each part in at the highest level it supports and record which level you used.

| Level | For | How | Editable in Studio afterwards |
| --- | --- | --- | --- |
| Native | code that can become HTML + GSAP: most Remotion, HTML/CSS/GSAP animation, simple Motion Canvas | translate it, then verify frame by frame | every element; variables, catalog, presets apply |
| Hosted | code that can draw any requested frame in a browser: canvas, p5.js, Three.js, Lottie, WebGL, other JS animation | keep the code and drive it from HyperFrames time | timing, position, exposed parameters |
| Media | anything that outputs video or frames: Manim, After Effects, Blender, PIL, moviepy | render to a file and use it as a clip | cut, place, layer; not the pixels inside |

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

## Native: translate, then verify

The rest: https://github.com/heygen-com/hyperframes/blob/HEAD/skills/remotion-to-hyperframes/SKILL.md