skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-to-hyperframes

Convert Remotion React composition source code into HyperFrames HTML with SSIM-validated output.

Updated Aug 28, 2026
Search Tags:#react#code translation#gsap#remotion#hyperframes#video migration#ssim validation
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill remotion-to-hyperframes-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/html-video-production/references/remotion-to-hyperframes
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill remotion-to-hyperframes-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, gsap, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Porting an existing Remotion (React) video composition to HyperFrames by hand is error-prone: timing math, easing curves, sequencing offsets, and media handling all differ between the two frameworks, and a translation that merely "looks right" can silently diverge from the original render. This Skill provides a structured lint-translate-validate workflow that produces a faithful HyperFrames HTML composition and measures fidelity against the Remotion baseline. ## Core Features & Use Cases - Source linting before translation: scripts/lint_source.py scans the Remotion project for blockers (useState/useReducer-driven animation, side-effect hooks, async calculateMetadata, third-party React UI libraries) and recommends the runtime interop pattern instead of producing broken HTML. - API mapping references: Topic references cover sequencing, timing/springs/easings, media, transitions, Lottie, fonts, and parameters, mapping each Remotion API to its HyperFrames HTML/GSAP equivalent. - Measured validation: scripts/render_diff.sh computes per-frame SSIM between the Remotion baseline and the HyperFrames render against tier-calibrated thresholds, and scripts/frame_strip.sh produces side-by-side frame strips for debugging failures. - Use Case: A user says "migrate my Remotion project to HyperFrames" — the Skill lints the source, translates the composition into an index.html with a paused GSAP timeline, renders both versions, and gates the result on SSIM thresholds while writing a TRANSLATION_NOTES.md for any lossy mappings. ## Quick Start Ask the assistant to port your existing Remotion composition source to HyperFrames and validate the result with the SSIM render diff.

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?▼

Run the lint script over the Remotion source first to detect untranslatable patterns, then map each Remotion API to its HyperFrames HTML/GSAP equivalent using the topic references, and finally validate by rendering both versions and comparing per-frame SSIM against tier thresholds.

What Remotion patterns cannot be translated to HyperFrames?▼

Blockers include useState or useReducer driving animation, useEffect with non-empty dependencies, async calculateMetadata, and third-party React UI libraries like MUI, Chakra, Mantine, antd, shadcn, Radix, or NextUI. These break the seek-driven deterministic frame model, so the runtime interop pattern is recommended instead.

Can I convert HyperFrames back to Remotion or migrate from After Effects?▼

No. The translation is one-way, Remotion to HyperFrames only. After Effects projects, Framer Motion, plain React, or CSS animations have no Remotion source to translate and should be re-created natively as a fresh HyperFrames composition.

How is translation quality validated between Remotion and HyperFrames renders?▼

Both versions are rendered to MP4 and compared with ffmpeg's SSIM filter, producing mean, min, p05, and p95 scores in a summary JSON. Thresholds are calibrated per complexity tier (0.90-0.95), and both renders must use matching PNG pixel format and bt709 color space to avoid measuring encoder differences.

Why does my translated video have a low SSIM score?▼

Common causes are mismatched pixel formats between renders, system font fallback divergence between Chromium versions (about 0.025 SSIM), or timing and sequencing errors. Generate a side-by-side frame strip to see which frames diverged, then re-check the timing or sequencing references.

How are Remotion springs and easings translated to GSAP?▼

Remotion spring configs map approximately to GSAP back.out easings with overshoot scaled by damping and stiffness, while Easing functions map to power, elastic, bounce, or CustomEase equivalents. Linear interpolate calls become GSAP tweens with ease none at frame-derived second offsets.

Related Skills

Explore More Software Engineering Skills→
openvettaopenvetta
154

remotion-video

Create, edit, and render Remotion React video projects to MP4 in the workspace.

Official
Intermediate
1veso1veso

remotion-to-hyperframes

Converts Remotion video compositions to HyperFrames HTML with linting and SSIM-based validation.

Community
Advanced
wesleysimpliciowesleysimplicio
1

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML with GSAP.

Community
Advanced
gmolikegmolike

remotion-to-hyperframes

Convert Remotion React video compositions into HyperFrames HTML compositions with SSIM validation.

Community
Advanced