remotion-to-hyperframes

The `remotion-to-hyperframes` skill enables the automated translation of existing Remotion (React-based) video compositions into HyperFrames HTML compositions. It is designed to address the challenge of migrating complex video projects from the React-centric Remotion framework to the HTML + GSAP-based HyperFrames system, without manually rewriting code. By detecting and converting most Remotion patterns, this skill minimizes the risk of introducing errors during migration while ensuring that the resulting HyperFrames compositions maintain visual fidelity to the original source. The skill also includes safeguards against unsupported constructs, guiding users to runtime interop solutions when a direct translation is not feasible.

Key features of this skill include a thorough linting process that identifies blocking, warning, and informational patterns in the source code, a structured API mapping between Remotion and HyperFrames, and a tiered test corpus to validate translation quality using SSIM thresholds. It handles common video composition elements such as sequences, loops, absolute fills, and timing functions, while providing detailed notes on dropped or modified constructs. The skill also references comprehensive documentation for parameter mapping, sequencing, and timing, ensuring that translations are accurate and maintainable.

This skill is ideal for developers and technical artists who have existing Remotion projects and want to port them to HyperFrames without starting from scratch. It is particularly useful for teams looking to consolidate their video workflows into HTML-based compositions or integrate HyperFrames into their existing web projects. Target users include front-end engineers, motion graphics developers, and multimedia teams familiar with React who need a reliable, semi-automated migration path from Remotion to HyperFrames.