skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

remotion-to-hyperframes

Convert Remotion React video compositions into HyperFrames HTML with GSAP timelines.

2|1|Updated Jun 9, 2026
Search Tags:#react#code translation#gsap#remotion#hyperframes#video migration#ssim validation
One-click install
npx skills add https://github.com/zester4/zilmate --skill remotion-to-hyperframes-zester4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/zester4/zilmate --skill remotion-to-hyperframes-zester4

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 a Remotion (React) video composition to HyperFrames by hand is error-prone: frame-based timing, spring physics, sequencing, and media handling all map differently, and some React patterns (useState, useEffect, async metadata) cannot translate at all. This Skill encodes the full API mapping, lints sources for untranslatable patterns, and validates output with SSIM-based visual diffing. ## Core Features & Use Cases - Source linting: scripts/lint_source.py scans Remotion code and classifies findings as blockers (useState, useEffect with deps, async calculateMetadata, third-party React UI libraries), warnings (@remotion/lambda, delayRender, useMemo), or info (staticFile, interpolateColors), recommending the runtime interop pattern from PR #214 when translation would be lossy. - Guided translation: references/ provide per-topic API mappings for sequencing, timing/springs/easings, media, transitions, Lottie, fonts, and parameters, converting Remotion idioms into a single paused GSAP timeline inside an HTML composition. - Measured validation: render_diff.sh computes per-frame SSIM against the Remotion baseline, frame_strip.sh produces side-by-side comparison strips, and a tiered test corpus (T1-T4) gates translations against calibrated thresholds. - Use Case: A user says "migrate my Remotion promo video to HyperFrames" — the Skill lints the source, translates sequences and springs into GSAP tweens, renders both versions, and confirms visual equivalence with an SSIM report plus a TRANSLATION_NOTES.md documenting any gaps. ## Quick Start Ask the assistant to port your existing Remotion composition to HyperFrames and point it at your Remotion source directory.

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 composition to HyperFrames?▼

Run the lint script over your Remotion source first to detect untranslatable patterns, then follow the API mapping references to emit an HTML composition with a paused GSAP timeline. Finally render both versions and compare them with the SSIM diff script to confirm visual equivalence.

Which Remotion APIs can be translated to HyperFrames?▼

Sequence, Series, AbsoluteFill, interpolate, spring, Easing, Audio, Video, Img, IFrame, staticFile, Lottie, Google Fonts, and sync calculateMetadata all have direct mappings. TransitionSeries presets map to manual GSAP crossfades or HyperFrames shader transitions.

Can Remotion code using useState or useEffect be ported to HyperFrames?▼

No. Compositions driving animation with useState, useReducer, useEffect with non-empty deps, async calculateMetadata, or third-party React UI libraries are blockers. The recommended path is the runtime interop pattern from PR #214, which mounts a Remotion Player inside HyperFrames.

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

The render_diff.sh script computes per-frame SSIM between the Remotion baseline and the HyperFrames render, producing mean, min, p05, and p95 statistics against a threshold. Both renders must use matching pixel formats (PNG image format, bt709 color space) or the diff measures encoder differences.

Does @remotion/lambda configuration block translation?▼

No, it is a warning rather than a blocker because Lambda is deployment configuration orthogonal to the rendered composition. The skill drops the lambda imports and renderMediaOnLambda calls, translates the rest, and documents the gap in TRANSLATION_NOTES.md.

When should I not use the Remotion to HyperFrames migration path?▼

Do not use it for authoring new HyperFrames compositions, reverse export from HyperFrames to Remotion, or non-Remotion sources like After Effects or Framer Motion. Those cases should be recreated natively with the general HyperFrames authoring workflow.

Related Skills

Explore More Software Engineering Skills→
haidonglethqbhaidonglethqb

remotion

Outline React-based composition and rendering best practices for Remotion video production.

Community
Advanced
EmasoftEmasoft

amw-hyperframes-bridge

Renders HTML compositions to MP4 video via the external Hyperframes CLI.

Community
Advanced
wesleysimpliciowesleysimplicio
1

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML with GSAP.

Community
Advanced
boraoztuncboraoztunc
248

remotion-to-hyperframes

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

Community
Advanced