remotion-to-hyperframes

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 with a tiered test corpus (T1–T4, 4 fixtures total) that grades translations against measured SSIM thresholds. Don't translate without running the eval — a translation that "looks right" but renders 0.05 SSIM lower than the validated baseline is silently wrong.

When to use

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

• "port my Remotion project to HyperFrames"
• "convert this Remotion code to HyperFrames"
• "migrate from Remotion"
• "translate this Remotion comp"
• "rewrite this as HyperFrames HTML"