Install this skill with its sibling skills. See runtime setup and capability boundaries before executing commands. User instructions and the requested production stage take precedence over workflow defaults.

Remotion to HyperFrames

Confirm the route before you build. Use this only to port an existing Remotion (React) composition's source into HyperFrames. Authoring a new composition (even one inspired by a Remotion video) → the creation workflows / /general-video. Out of scope (one-way, Remotion-only): no reverse export (HyperFrames → Remotion or any framework), and a non-Remotion source (After Effects, Framer Motion, plain React / CSS) has no Remotion source to translate → re-create via /general-video. Unsure, or only a passing Remotion mention? Read /hyperframes first.

Overview

Translate Remotion (React-based) video compositions into HyperFrames (HTML + GSAP) compositions. Most Remotion idioms have direct HyperFrames equivalents — the translation is mechanical for ~80% of typical compositions. This skill encodes the mapping and guards against the lossy 20% by refusing to translate patterns that don't fit HF's seek-driven model and recommending the runtime interop pattern from PR #214 instead.

The skill ships comparison scripts; the large upstream test corpus is excluded. Validate the actual translated project using matched renders, numerical comparison and visual/audio inspection. SSIM alone does not establish semantic fidelity.

When to use

Use this skill ONLY when the user explicitly asks to migrate from Remotion. Example trigger phrases: