Search skills/

remotion-to-hyperframes skill

Ports Remotion, Lottie, Three.js, canvas and other video code into HyperFrames and checks the result frame by frame against the original.

in heygen-com/hyperframes Planning, TDD & debuggingVideo & media
Our verdict Recommended

A careful migration skill with a lint step, an API map and a frame-diff check; unusually well tested for a prompt pack.

5/5 Depth expertise shipped Note Security Review before installing 0d Maintenance Updated today 530K Adoption installs OK License Apache-2.0, commercial OK

What the remotion-to-hyperframes skill does

This skill handles migration into HyperFrames. It classifies each part of the source at one of three levels and records which it used: native (translate Remotion or simple HTML/GSAP code into HyperFrames clips and variables, editable afterwards), hosted (keep canvas, p5.js, Three.js, Lottie or WebGL code and let HyperFrames drive its clock), and media (render output from Manim, After Effects or Blender to a file and place it as a clip).

For Remotion the agent first runs a bundled lint script that flags blockers such as useState, useEffect with dependencies, async calculateMetadata and React UI kits, which cannot be translated and must be hosted or refactored out. It then translates scenes to one sub-composition each, converts frames to seconds, turns props into composition variables, and uses reference pages that map Remotion APIs (Sequence, interpolate, spring, TransitionSeries, Lottie, fonts, media) to their HyperFrames equivalents. Verification is the distinctive part: snapshot --against <original.mp4> places original and port side by side, and a diff script reports per-frame SSIM with a strip view of diverging frames. Anything that did not translate cleanly is written to TRANSLATION_NOTES.md. The folder has about 50 files, including a four-tier test corpus of sample projects with expected results and an evaluation guide.

Good for

  • Moving an existing Remotion project into HyperFrames with a measurable fidelity check
  • Reusing canvas, Lottie or Three.js animations inside a HyperFrames timeline
  • Evaluating how much of a code-based video will translate before committing

Not for

  • Projects with no existing video code to migrate
  • Remotion sources built on stateful React hooks or UI kits, which only port as hosted or media clips

Depth 5/5

A 5 KB SKILL.md with 11 reference pages, three helper scripts plus a smoke test and unit test, and a four-tier test corpus with expected results and an eval guide.

Dependencies and costs

  • HyperFrames CLI (Node.js 22+) and FFmpeg
  • Python 3 for lint_source.py
  • The original project's renders for comparison
  • Telemetry: The skill sends nothing itself. It relies on the HyperFrames CLI, whose usage counters are on by default (disable with npx hyperframes telemetry disable).

Security review

Review before installing

Skill for translating Remotion video projects into HyperFrames HTML compositions, with ffmpeg-based frame-diff and lint scripts and a four-tier test corpus. The scripts run locally without network calls; the corpus runner installs Remotion with npm and is for maintainers. The HyperFrames CLI the skill uses was not reviewed, and some skill files were missing.

Worth knowing

  • Relies on a CLI or package we could not reviewConversion and checks rely on the HyperFrames npm CLI, ffmpeg/ffprobe and, for the test corpus, Remotion, none of whose code is in the skill folder.skills/remotion-to-hyperframes/SKILL.md:3
  • Runs remote code at an unpinned versionStandalone installs run npx hyperframes without a version (plugin installs use a launcher pinned to the plugin release).skills/remotion-to-hyperframes/SKILL.md:3
  • Installs packages or toolsThe maintainers' test-corpus runner does npm install for the Remotion fixture projects (caret ranges for remotion, react, zod); it is not part of normal conversions.skills/remotion-to-hyperframes/assets/test-corpus/run.sh:129

What we checked

The skill folder (78 files) on Oct 29, 2026. Not a full review: 28 of 78 files were not downloaded (large repository; we reviewed the skill folders); we read 11 of 17 code files; it relies on code outside the repository: npm package hyperframes (HyperFrames CLI, run through npx); npm packages remotion, @remotion/cli, react and zod installed by the test corpus; 28 files in the skill folder were not downloaded, including some fixture sources.

NVIDIA SkillSpector static scan: 39 pattern hits (Supply Chain 23, MCP Rug Pull 8, Memory Poisoning 7, MCP Least Privilege 1). Hits are fixture package.json caret ranges, the fetch(...) example in parameters.md and the 'use-credentials' note in limitations.md. No scripts download or execute remote content.

A review, not a certification. Skills change after we check them — read the files before installing.

License

Apache-2.0 — commercial use allowed.

Can it run unattended?

Not really. It has a verify-and-compare loop but expects a person to review divergences and approve translation choices.

Alternatives

Remotion Agent Skills

remotion-dev/skills

The Remotion team's twelve skills for building videos as React code: project setup, markup rules, maps, captions, studio, render and upgrades.

Recommended Check first Depth 3/5

video-shotcraft

Vincentwei1021/video-shotcraft

Remotion-based skill for cinematic product promo videos, with 124 shot recipe cards, a full template, beat sync, sound design and a motion workbench.

With caveats Check first Depth 5/5

GSAP Skills

greensock/gsap-skills

GreenSock's official skills for correct GSAP animation code: core API, timelines, ScrollTrigger, plugins, React and other frameworks, utilities and performance.

Recommended Check first Depth 2/5

FAQ

What is remotion-to-hyperframes?

It is a HyperFrames skill that converts existing video code into HyperFrames projects, starting with Remotion and also covering Motion Canvas, Lottie, Three.js, p5.js and canvas animations. It verifies the port frame by frame against the original render.

How do I install remotion-to-hyperframes?

It installs on demand: run npx hyperframes skills update remotion-to-hyperframes, or npx skills add heygen-com/hyperframes and select it. Install the core HyperFrames skills too, since the port follows the /hyperframes contract.

Can every Remotion project be converted?

No. The skill's lint step flags blockers such as useState, useEffect with dependencies and React UI kits like MUI or shadcn. Those parts have to be hosted as running code, refactored out, or brought in as pre-rendered media.

How does it check the result?

It compares original and port with hyperframes snapshot --against and a diff script that gives SSIM per frame, then lists the frames that diverged. Differences it cannot fix are recorded in TRANSLATION_NOTES.md.

Sources: GitHub repository; install counts from skills.sh via Best Skills (CC BY 4.0). Review based on the published SKILL.md.