skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

remotion-to-hyperframes

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

Updated Mar 4, 2026
Search Tags:#react#migration#video#gsap#remotion#ssim#hyperframes
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill remotion-to-hyperframes-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/gmolike/Claude-Template --skill remotion-to-hyperframes-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Porting a Remotion (React-based) 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 some React patterns (useState, side effects, async metadata) cannot be translated at all. This Skill encodes the full API mapping, lints the source for untranslatable patterns, and validates the result with per-frame SSIM comparison so the translation is measurably correct. ## Core Features & Use Cases - Source linting with blocker detection: scripts/lint_source.py scans Remotion code for blockers (useState, useReducer, useEffect with deps, async calculateMetadata, third-party React UI libraries) and recommends the runtime interop pattern from PR #214 instead of a lossy translation. - Complete API mapping references: per-topic guides cover sequencing, timing (interpolate/spring/easing to GSAP), media, transitions, Lottie, fonts, and parameters, converting frame-based Remotion idioms into a paused GSAP timeline in a single HTML file. - SSIM-based validation harness: render_diff.sh and frame_strip.sh compare the Remotion baseline render against the HyperFrames output, with calibrated per-tier thresholds (T1–T3) and a frame-strip visual debugger for failures. - Use Case: A user says "port my Remotion project to HyperFrames" — the Skill lints the source, translates the composition into index.html with data-* attributes and a GSAP timeline, renders both versions, and confirms the translation passes the SSIM threshold while writing TRANSLATION_NOTES.md for any dropped constructs. ## Quick Start Ask the assistant to port your Remotion composition to HyperFrames by pointing it at your Remotion source directory and requesting a migration.

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 translate using the API mapping references: sequences become data-start/data-duration divs, and useCurrentFrame derivations become tweens on a paused GSAP timeline. Validate by rendering both versions and comparing with the SSIM diff script.

Which Remotion APIs can be translated to HyperFrames?▼

Composition, Sequence, Series, AbsoluteFill, interpolate, spring, Easing, interpolateColors, Audio, Video, Img, IFrame, staticFile, Lottie, Google Fonts, and sync calculateMetadata all translate cleanly. TransitionSeries presets map to manual GSAP crossfades or HyperFrames shader-transitions.

Can Remotion compositions using useState or useEffect be converted?▼

No. Compositions that drive animation via useState, useReducer, or useEffect with non-empty dependencies break HyperFrames' seek-driven deterministic model. The lint script flags these as blockers and recommends the runtime interop pattern from PR #214, which mounts a Remotion Player inside HyperFrames instead.

How is translation quality between Remotion and HyperFrames measured?▼

Quality is measured with per-frame SSIM using ffmpeg via the render_diff.sh script, which outputs mean, min, p05, and p95 scores against a threshold. Validated baselines range from 0.953 to 0.985 mean SSIM across three test tiers, and frame_strip.sh produces side-by-side images for debugging failures.

Does @remotion/lambda configuration block translation?▼

No, @remotion/lambda is a warning, not a blocker, because Lambda config is deployment infrastructure orthogonal to the rendered composition. The translation drops the import and renderMediaOnLambda calls, then documents the gap in TRANSLATION_NOTES.md since HyperFrames renders single-machine.

Why does my SSIM diff fail even with a correct translation?▼

The most common cause is mismatched pixel formats: Remotion defaults to yuvj420p while HyperFrames outputs yuv420p, costing about 0.05 SSIM. Set Config.setVideoImageFormat('png') and Config.setColorSpace('bt709') in remotion.config.ts, and check for system font fallback divergence, which adds roughly 0.025 SSIM noise.

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
AIDotNetAIDotNet
634

hyperframes-cli

Scaffolds, lints, inspects, previews, and renders HyperFrames HTML video compositions via CLI.

Official
Intermediate
hugotownhugotown

remotion-to-hyperframes

Translate Remotion React video compositions into HyperFrames HTML and GSAP compositions.

Community
Advanced
heygen-comheygen-com
40.2k

remotion-to-hyperframes

Translate Remotion compositions into HyperFrames HTML+GSAP timelines.

Official
Advanced