skills.rest
wesleysimplicio
wesleysimplicioCOMMUNITY
Explore all skills by this author →
𝕏@wesleysimplicGitHub

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML with GSAP.

1|Updated May 7, 2026
Search Tags:#migration#translation#animation#gsap#remotion#hyperframes
One-click install
npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill remotion-to-hyperframes-wesleysimplicio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/wesleysimplicio/simplicio-mapper/tree/main/.skills/remotion-to-hyperframes
Command: npx skills add https://github.com/wesleysimplicio/simplicio-mapper --skill remotion-to-hyperframes-wesleysimplicio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates Remotion (React-based) video compositions into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. port my Remotion project to HyperFrames). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants the same video as my Remotion one without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the hyperframes skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, remotion/lambda) and recommends the runtime interop escape hatch instead of a lossy translation.

Core Features & Use Cases

  • Lint the Remotion source to detect blockers (useState, useEffect with non-empty deps, lambda configs) and surface warnings for exacerbating translation gaps.
  • Plan the translation by mapping Remotion APIs to HyperFrames equivalents using a reference map and selecting required references per topic.
  • Generate a HyperFrames HTML composition with staged timelines, data attributes, and inline styles for deterministic playback.
  • Validate translations against a test harness, compare SSIM to a baseline, and document any translation gaps in TRANSLATION_NOTES.md.

Quick Start

Run the Remotion-to-HyperFrames workflow on a Remotion project to generate a HyperFrames-ready HTML composition.

Frequently Asked Questions about remotion-to-hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Remotion project to HyperFrames?▼

To migrate Remotion compositions to HyperFrames, the workflow lints the source code, maps Remotion APIs to HyperFrames equivalents using a reference, and generates a structured HTML+GSAP composition for deterministic playback.

Can I translate Remotion components using useState or useEffect to HyperFrames?▼

Remotion components using useState or useEffect with non-empty dependencies are detected as translation blockers during linting, triggering warnings that recommend using a runtime interop escape hatch instead of a lossy translation.

What is the process for migrating Remotion video compositions to HTML?▼

Migrating Remotion video compositions to HTML involves linting the source for unsupported patterns, planning the API translation via a reference map, generating a staged HTML+GSAP timeline, and validating the output against a test harness.

Does the Remotion to HyperFrames migration support lambda configurations?▼

Remotion lambda configurations are detected during the linting phase and flagged as exacerbating translation gaps, meaning they are not directly supported in the standard HTML+GSAP migration workflow.

How are translation gaps documented when porting Remotion code to HyperFrames?▼

Translation gaps encountered when porting Remotion code to HyperFrames are documented in a generated TRANSLATION_NOTES.md file after the validation phase compares the output against a baseline using SSIM.

When should I not use a Remotion to HyperFrames translation?▼

You should not use Remotion to HyperFrames translation when authoring a new HyperFrames composition, when Remotion is mentioned only as a reference, or when the user wants a similar video without explicitly requesting source code migration.

Related Skills

Explore More Software Engineering Skills→
chmonitorchmonitor
255

remotion-to-hyperframes

Translate Remotion React compositions into HyperFrames HTML and GSAP timelines.

Official
Advanced
automatedigitalautomatedigital
1

remotion-to-hyperframes

Translate Remotion video compositions to HyperFrames HTML and GSAP.

Official
Advanced
boraoztuncboraoztunc
248

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML with safe pattern enforcement.

Community
Advanced
KamalabotKamalabot

remotion-to-hyperframes

Translate Remotion React video compositions into HyperFrame HTML and GSAP timelines.

Community
Advanced