Score
9.0
/ 10
Installs
569K
Repo Stars
79.1K
Last Updated
0d ago
Quality Ratio
90%
Description
Verified
Language
TypeScript
First Published
Apr 2026
Summary
The Remotion To Hyperframes agent skill translates Remotion (React-based) video compositions into HyperFrames (HTML + GSAP) compositions, converting declarative video logic to a web-native, seek-driven format. This agent skill is essential for developers migrating Remotion projects to HyperFrames, particularly when a web-native, seek-driven HTML output is required. It is a skill with 3K installs. The skill initiates with a linting process to detect Remotion patterns like `useState`, `useEffect` with side effects, or third-party React UI libraries that cannot translate cleanly, recommending a runtime interop escape hatch for such blockers. For translatable compositions, it maps Remotion APIs to HyperFrames equivalents, generating an `index.html` with root and scene divs, inline CSS for layout, and a paused `gsap.timeline` that orchestrates animations. It also facilitates validation by recommending SSIM diff checks against Remotion baselines to ensure fidelity and catch silent rendering errors. However, this skill explicitly does not translate React state machines or integrate Remotion's render pipeline, instead guiding users towards a dedicated runtime interop pattern for such scenarios.
Skill Definition
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.
| 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 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 andnpx 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 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.