Skill Tracer
Skills › HyperFrames › remotion-to-hyperframes

remotion-to-hyperframes

skill · 51 lines · Apache-2.0 · skills/remotion-to-hyperframes/SKILL.md

The facts

Its 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.

The description the agent reads to decide when to use it.

From its settingsline 3

When it starts

A conversation where someone wants to port, convert or migrate an existing video project (Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas, plain HTML/CSS animation, or Manim/After Effects/Blender renders) into HyperFrames and check it matches the original frame by frame.

Things a person might say (the model's guesses)

  • “Convert my Remotion project to HyperFrames and check it matches the original render”
  • “I have a Lottie animation and a Three.js scene, can you bring them into HyperFrames?”
  • “Migrate this After Effects render into a HyperFrames video as a clip”

A model's summary of when it is used.

A model's reading

Runs scripts

scripts/lint_source.py

Scripts the text names. Found by matching words, so treat them as pointers.

Found by matching wordsline 24

Files it mentions

references/escape-hatch.md, references/api-map.md, references/eval.md, references/parameters.md, references/sequencing.md (first 5 of 11 lines)

Files the text names, such as ones to read or write. Found by matching words, so treat them as pointers.

Found by matching wordsline 24 line 25 line 27 line 32 line 33

What it leads to

Other skills this one hands off to, calls, requires or offers instead, as a model read them.

A model's reading

What leads to it

Other skills that hand off to this one, call it, require it or offer it instead, as a model read them.

A model's reading

Licence

Apache-2.0, from LICENSE

The terms its author shares it under, which let it be shown here.

From the repositorylicence text
Other files in this skill (41) Close

The text

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1---
2name: remotion-to-hyperframes
3description: 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.
4---
5
6**Plugin installs:** Inside a HyperFrames plugin, follow [plugin execution rules](../hyperframes/references/plugin-installation.md).
7
8**Usage beacon:** run `npx hyperframes events --skill=remotion-to-hyperframes` once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.
9
10# Import into HyperFrames
12HyperFrames 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.
14| Level | For | How | Editable in Studio afterwards |
15| --- | --- | --- | --- |
16| 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 |
17| 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 |
18| 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 |
20Code that depends on wall-clock time, live physics or the network can only come in as media.

Plugin installs: Inside a HyperFrames plugin, follow plugin execution rules.

Usage beacon: run npx hyperframes events --skill=remotion-to-hyperframes once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.

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.

LevelForHowEditable in Studio afterwards
Nativecode that can become HTML + GSAP: most Remotion, HTML/CSS/GSAP animation, simple Motion Canvastranslate it, then verify frame by frameevery element; variables, catalog, presets apply
Hostedcode that can draw any requested frame in a browser: canvas, p5.js, Three.js, Lottie, WebGL, other JS animationkeep the code and drive it from HyperFrames timetiming, position, exposed parameters
Mediaanything that outputs video or frames: Manim, After Effects, Blender, PIL, moviepyrender to a file and use it as a clipcut, place, layer; not the pixels inside

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

Raw lines 1 to 21
22## Native: translate, then verify
241. For Remotion, run `python3 <SKILL_DIR>/scripts/lint_source.py <source dir>` first. Blockers (`useState`, `useReducer`, `useEffect` with dependencies, async `calculateMetadata`, React UI kits such as MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI) don't translate: host them or refactor them out, never approximate (`references/escape-hatch.md`). Warnings (`@remotion/lambda` config, `delayRender`, `useMemo`, custom hooks) are dropped and noted.
252. Translate to the `/hyperframes` contract: one sub-composition per scene, times in seconds (`frame / fps`), asset paths root-relative. Each Remotion API's equivalent is in `references/api-map.md`. Put Remotion's render-page rule `* { box-sizing: border-box; }` once in the root `index.html` `<style>`: without it every bordered or padded element grows by its border and padding.
263. Keep it editable: the source's props become `data-composition-variables` bound with `data-var-text`, `data-var-src` or `var(--id)`; each `Sequence` becomes a timed clip or a sub-composition; a reused component becomes one sub-composition mounted several times with `data-variable-values`.
274. Compare frame by frame: `npx hyperframes diff <original.mp4> . --at <t,…>` scores your project against the original at those times without rendering; sample every scene and both sides of every cut. Then render and `npx hyperframes diff <original.mp4> <hf.mp4>` scores every frame: SSIM, the worst cell of each frame (one late or recoloured element), cuts, and a sheet of the worst moments (thresholds per complexity tier in `references/eval.md`). Render the Remotion side with `Config.setVideoImageFormat("png")` and `Config.setColorSpace("bt709")`, or the diff measures the encoders (about 0.05 SSIM).
285. Write what didn't translate cleanly (dropped volume ramps, approximated presentations, substituted fonts) to `TRANSLATION_NOTES.md`.
30| Remotion | Read |
31| --- | --- |
32| `Composition`, `defaultProps`, `schema`, `calculateMetadata` | `references/parameters.md` |
33| `Sequence`, `Series`, `Loop`, `AbsoluteFill`, `Freeze` | `references/sequencing.md` |
34| `useCurrentFrame`, `interpolate`, `spring`, `Easing`, `interpolateColors` | `references/timing.md` |
35| `Audio`, `Video`, `Img`, `IFrame`, `staticFile`, `delayRender` | `references/media.md` |
36| `TransitionSeries`, `@remotion/transitions` | `references/transitions.md` |
37| `@remotion/lottie` | `references/lottie.md` |
38| `@remotion/google-fonts`, `Font.loadFont`, `@font-face` | `references/fonts.md` |
39| What can't be ported | `references/limitations.md` |
41Before hand-building a named visual the source used, search `npx hyperframes catalog --query "<the visual, in English>" --json`: it ranks the whole registry with nothing installed.

Native: translate, then verify

  1. For Remotion, run python3 <SKILL_DIR>/scripts/lint_source.py <source dir> first. Blockers (useState, useReducer, useEffect with dependencies, async calculateMetadata, React UI kits such as MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI) don't translate: host them or refactor them out, never approximate (references/escape-hatch.md). Warnings (@remotion/lambda config, delayRender, useMemo, custom hooks) are dropped and noted.
  2. Translate to the /hyperframes contract: one sub-composition per scene, times in seconds (frame / fps), asset paths root-relative. Each Remotion API's equivalent is in references/api-map.md. Put Remotion's render-page rule * { box-sizing: border-box; } once in the root index.html <style>: without it every bordered or padded element grows by its border and padding.
  3. Keep it editable: the source's props become data-composition-variables bound with data-var-text, data-var-src or var(--id); each Sequence becomes a timed clip or a sub-composition; a reused component becomes one sub-composition mounted several times with data-variable-values.
  4. Compare frame by frame: npx hyperframes diff <original.mp4> . --at <t,…> scores your project against the original at those times without rendering; sample every scene and both sides of every cut. Then render and npx hyperframes diff <original.mp4> <hf.mp4> scores every frame: SSIM, the worst cell of each frame (one late or recoloured element), cuts, and a sheet of the worst moments (thresholds per complexity tier in references/eval.md). Render the Remotion side with Config.setVideoImageFormat("png") and Config.setColorSpace("bt709"), or the diff measures the encoders (about 0.05 SSIM).
  5. Write what didn't translate cleanly (dropped volume ramps, approximated presentations, substituted fonts) to TRANSLATION_NOTES.md.
RemotionRead
Composition, defaultProps, schema, calculateMetadatareferences/parameters.md
Sequence, Series, Loop, AbsoluteFill, Freezereferences/sequencing.md
useCurrentFrame, interpolate, spring, Easing, interpolateColorsreferences/timing.md
Audio, Video, Img, IFrame, staticFile, delayRenderreferences/media.md
TransitionSeries, @remotion/transitionsreferences/transitions.md
@remotion/lottiereferences/lottie.md
@remotion/google-fonts, Font.loadFont, @font-facereferences/fonts.md
What can't be portedreferences/limitations.md

Before hand-building a named visual the source used, search npx hyperframes catalog --query "<the visual, in English>" --json: it ranks the whole registry with nothing installed.

Raw lines 22 to 42
Runs code scripts/lint_source.py :24
Reads a file references/escape-hatch.md :24
Names a skill hyperframes :25
Reads a file references/api-map.md :25
Reads a file references/eval.md :27
Reads a file references/parameters.md :32
Reads a file references/sequencing.md :33
Reads a file references/timing.md :34
Reads a file references/media.md :35
Reads a file references/transitions.md :36
Reads a file references/lottie.md :37
Reads a file references/fonts.md :38
Reads a file references/limitations.md :39
43## Hosted
45Keep the code and let HyperFrames own the clock: it draws the frame for the time it is given. The seek protocol and the built-in adapters for Lottie, Three.js, anime.js, WAAPI and CSS animations are in `../hyperframes/references/runtimes.md`. No `requestAnimationFrame` loop or timer as the time source, seeded randomness only, and `data-duration` on the root when nothing else defines the length.

Hosted

Keep the code and let HyperFrames own the clock: it draws the frame for the time it is given. The seek protocol and the built-in adapters for Lottie, Three.js, anime.js, WAAPI and CSS animations are in ../hyperframes/references/runtimes.md. No requestAnimationFrame loop or timer as the time source, seeded randomness only, and data-duration on the root when nothing else defines the length.

Raw lines 43 to 46
47## Media
49`<video class="clip" data-has-audio="true" src="assets/x.mp4" ...>`, or `muted` when it is silent. Nothing else is needed.
51In the final message, list each imported part with its level, what a person can change in Studio, and how the frame-by-frame comparison came out.

Media

<video class="clip" data-has-audio="true" src="assets/x.mp4" ...>, or muted when it is silent. Nothing else is needed.

In the final message, list each imported part with its level, what a person can change in Studio, and how the frame-by-frame comparison came out.

Raw lines 47 to 51

From heygen-com/hyperframes at a595755, 2026-11-07. Skills read by Claude Sonnet 5.5 on 2026-11-07. Summary and techniques by Claude Opus 5.5 on 2026-11-07.