remotion-to-hyperframes
Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants...
npx skills add https://github.com/heygen-com/hyperframes --skill remotion-to-hyperframesPlugin installs: Before setup or freshness commands, follow plugin execution rules 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
- For Remotion, run
python3 <SKILL_DIR>/scripts/lint_source.py <source dir>first. Blockers (useState,useReducer,useEffectwith dependencies, asynccalculateMetadata, 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/lambdaconfig,delayRender,useMemo, custom hooks) are dropped and noted. - Translate to the
/hyperframescontract: one sub-composition per scene, times in seconds (frame / fps), asset paths root-relative. Each Remotion API's equivalent is inreferences/api-map.md. Put Remotion's render-page rule* { box-sizing: border-box; }once in the rootindex.html<style>: without it every bordered or padded element grows by its border and padding. - Keep it editable: the source's props become
data-composition-variablesbound withdata-var-text,data-var-srcorvar(--id); eachSequencebecomes a timed clip or a sub-composition; a reused component becomes one sub-composition mounted several times withdata-variable-values. - Compare frame by frame:
npx hyperframes snapshot --at <t,…> --against <original.mp4>saves the original's frame at each time next to yours. Sample every scene and both sides of every cut; look for one late or recoloured element, not only the overall picture. For a scored check,scripts/render_diff.sh <original.mp4> <hf.mp4> <out>gives SSIM per frame andscripts/frame_strip.shshows which frames diverged (thresholds per complexity tier inreferences/eval.md). Render the Remotion side withConfig.setVideoImageFormat("png")andConfig.setColorSpace("bt709"), or the diff measures the encoders (about 0.05 SSIM). - Write what didn't translate cleanly (dropped volume ramps, approximated presentations, substituted fonts) to
TRANSLATION_NOTES.md.
| Remotion | Read |
|---|---|
Composition, defaultProps, schema, calculateMetadata | references/parameters.md |
Sequence, Series, Loop, AbsoluteFill, Freeze | references/sequencing.md |
useCurrentFrame, interpolate, spring, Easing, interpolateColors | references/timing.md |
Audio, Video, Img, IFrame, staticFile, delayRender | references/media.md |
TransitionSeries, @remotion/transitions | references/transitions.md |
@remotion/lottie | references/lottie.md |
@remotion/google-fonts, Font.loadFont, @font-face | references/fonts.md |
| What can't be ported | references/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.
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.
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.