Remotion to HyperFrames Migration Skill for Codex
Move a frame-based Remotion composition to editable HyperFrames HTML. Convert frame timing to seconds, compare rendered frames, and record anything that required a different implementation.
中文Setup for Codex
Requires a working local Remotion project and a HyperFrames toolchain with Node.js 22+, FFmpeg, Chromium, and Python 3 for the supplied source lint script.
- Install HyperFrames core skills for Codex using `npx hyperframes skills update`. Add the remotion-to-hyperframes skill separately through the upstream skills picker, or copy its complete pinned folder into .agents/skills.
- Keep the source project and rendered reference available. In the destination project, select $remotion-to-hyperframes and use its included source lint script before conversion.
Example task
In a 30-frames-per-second scratch Remotion project, create a title that starts at frame 30 and stays visible for 60 frames. Render a reference, then use $remotion-to-hyperframes to build an editable copy and compare the outputs at 0.5 and 1.5 seconds.Expected result
At 0.5 seconds the title is absent. At 1.5 seconds it is visible. The comparison preserves a one-second start and two-second clip duration.
Upstream documentation
Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed
Frequently asked question
How do I check a Remotion to HyperFrames migration in Codex?
Render the original and compare frames at known times, especially around cuts. Check that editable layers retain their timing and record unsupported features in the migration notes.