First, keep this skill fresh — confirm with the user before running: npx hyperframes skills update remotion-to-hyperframes. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.

Remotion to HyperFrames

The front door is /hyperframes. Use this only to port an existing Remotion (React) composition's source into HyperFrames, one way. Authoring a new composition, re-creating from a non-Remotion source (After Effects, Framer Motion, plain React / CSS — there is no Remotion source to translate), a passing Remotion mention, or any uncertainty → read /hyperframes first: the intent layer owns every route decision.

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: