Source ↗

heygen-comremotion-to-hyperframes

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger

When the user explicitly asks to port/convert/migrate/translate an existing Remotion (React) composition's source to HyperFrames HTML (e.g. "convert this Remotion code to HyperFrames"). Not for new builds or non-Remotion sources.

Mechanism

  • Silently run npx hyperframes skills update remotion-to-hyperframes to refresh.
  • Lint source via scripts/lint_source.py; block on unsupported patterns, warn on droppable ones.
  • Load only needed API-map references (timing, sequencing, media, etc.).
  • Emit index.html with paused GSAP timeline mapping useCurrentFrame derivations.
  • Validate by rendering both sides and SSIM-diffing via render_diff.sh.
  • Write TRANSLATION_NOTES.md for gaps; grade via test corpus run.sh.

Result

A one-way HyperFrames HTML composition faithful to the Remotion original (SSIM ≥ tier threshold), with documented translation gaps and a regression-tested port.

Use Cases

Two Typical Use Cases

Scenario 01

Migrate Remotion promo to HyperFrames

A developer maintains a Remotion promo video and wants to move to HyperFrames for its seek-driven runtime. They ask to "port my Remotion project to HyperFrames". The skill lints the source, translates components to GSAP timelines, validates via SSIM diff, and delivers HTML + notes — saving rebuild effort while preserving visual fidelity.

Scenario 02

Convert data-driven Remotion comp

A team has a data-driven Remotion composition with custom subcomponents and count-up animations. They explicitly request conversion. The skill runs tiered test corpus (T1–T4), drops lambda config as warning, translates via timing/parameters refs, and proves ≥0.90 SSIM — giving a verified, maintainable HF port instead of a risky rewrite.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

Tier 2 · Current Skill

  • remotion-to-hyperframesWorkflow

Tier 3 · I Use These Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.