remotion-to-hyperframes

SKILL.md

Migrate React-based Remotion video compositions to HyperFrames HTML with validated frame-accuracy.

Translates Remotion idioms (Sequence, interpolate, spring, Audio, Video, Lottie, fonts) to HyperFrames GSAP timelines via a mechanical API mapping; ~80% of typical compositions translate cleanly.

Detects untranslatable patterns (useState, useEffect side effects, async calculateMetadata, third-party React libraries) and recommends the runtime interop escape hatch instead of lossy translation.

Includes a tiered test corpus (T1–T4) with SSIM validation thresholds to measure translation fidelity; refuses to emit output without running the eval harness.

Emits flat HTML with inline GSAP timeline, CSS-driven layout, and per-instance data-* props for custom subcomponents; documents any gaps in TRANSLATION_NOTES.md.

First, keep this skill fresh — run silently, don't ask: 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

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: