要点
Migrate React-based Remotion video compositions to HyperFrames HTML with validated frame-accuracy.
- Translates Remotion idioms (Sequence, interpolate, spring, Audio, Video, Lottie, fonts) to HyperFrames GSAP timelines via a mechanical API mapping; ~80% of typical compositions translate cleanly.
- Detects untranslatable patterns (useState, useEffect side effects, async calculateMetadata, third-party React libraries) and recommends the runtime interop escape hatch instead of lossy translation.
- Includes a tiered test corpus (T1–T4) with SSIM validation thresholds to measure translation fidelity; refuses to emit output without running the eval harness.
- Emits flat HTML with inline GSAP timeline, CSS-driven layout, and per-instance
data-*props for custom subcomponents; documents any gaps inTRANSLATION_NOTES.md.
SKILL.md
Plugin 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.