# remotion-to-hyperframes

> Claude/Codex skill by [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 36k stars · 92k installs · Updated 2026-07-19

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 fresh build (/general-video). Unclear → /hyperframes.

Tags: ai, animation, ffmpeg, framework, gsap, html, mcp, puppeteer, rendering, typescript, video

## Install

```sh
git clone https://github.com/heygen-com/hyperframes /tmp/hyperframes && ln -s /tmp/hyperframes/skills/remotion-to-hyperframes ~/.claude/skills/remotion-to-hyperframes
```

## From README

Remotion to HyperFrames 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. 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 instead. The skill ships with a tiered test corpus (T1–T4, 4 fixtures total) that grades translations against measured SSIM thresholds.

## Links

- HTML page: https://omgskills.com/skills/heygen-com/hyperframes/website-to-hyperframes/
- GitHub: https://github.com/heygen-com/hyperframes
- Author: [@heygen-com](https://omgskills.com/library/heygen-com/index.md)

## More from this repo

- [changelog-video](https://omgskills.com/skills/heygen-com/hyperframes/dot-claude/skills/changelog-video/index.md) — Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 49k stars
- [hyperframes](https://omgskills.com/skills/heygen-com/hyperframes/hyperframes/index.md) — Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 43k stars
- [captions-overlay](https://omgskills.com/skills/heygen-com/hyperframes/dot-agents/skills/captions-overlay/index.md) — Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 41k stars