skills.rest
celeroncoder
celeroncoderCOMMUNITY
Explore all skills by this author →
Website𝕏@celeroncoderGitHub

remotion-to-hyperframes

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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, springs, sequences, and media props all need mechanical but precise conversion, and some React patterns silently break HyperFrames' seek-driven render model. This Skill encodes the full API mapping, lints the source for untranslatable patterns, and validates the result with SSIM-based visual diffing. ## Core Features & Use Cases - Source linting: scripts/lint_source.py scans Remotion code for blockers (useState, useEffect with deps, async calculateMetadata, third-party React UI libraries) and warnings (@remotion/lambda, delayRender, useMemo), recommending the runtime interop pattern from PR #214 when translation would be lossy. - Guided translation: Per-topic references map Remotion APIs to HyperFrames equivalents — Sequence/Series to data-start/data-duration divs, interpolate/spring to GSAP tweens, Audio/Video/Img to HTML media elements, Lottie and Google Fonts to their HF adapters. - Measured validation: render_diff.sh computes per-frame SSIM between the Remotion baseline and the HF render against tier-calibrated thresholds, and frame_strip.sh produces side-by-side frame strips for debugging failures. - Use Case: Given an existing Remotion project with a multi-scene composition using springs and audio, lint it, translate it to an index.html with a paused GSAP timeline, render both versions, and confirm the translation passes the SSIM threshold. ## Quick Start Ask the agent to port your Remotion composition to HyperFrames, for example: "Convert this Remotion comp in ./remotion-src to HyperFrames HTML and validate the output."

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 the Remotion source first to detect untranslatable patterns, then translate using the API mapping references: sequences become data-start/data-duration divs and interpolate/spring calls become GSAP tweens. Finally render both versions and compare them with the SSIM diff script.

Which Remotion APIs translate cleanly to HyperFrames?▼

AbsoluteFill, Sequence, Series, interpolate, spring, Easing, Audio, Video, Img, staticFile, Lottie, Google Fonts, and sync calculateMetadata all have direct HyperFrames equivalents. Pure custom subcomponents and hooks derived from useCurrentFrame also translate.

Can Remotion code using useState or useEffect be translated?▼

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

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

The render_diff.sh script computes per-frame SSIM between the Remotion baseline MP4 and the HyperFrames render, producing a summary with mean, min, and percentile scores. Both renders must use matching pixel formats (PNG image format, bt709 color space) or the diff measures encoder differences instead of translation fidelity.

Does the skill support converting HyperFrames back to Remotion?▼

No. The translation is one-way, Remotion to HyperFrames only. Non-Remotion sources like After Effects projects or plain React animations are also out of scope and should be re-created natively as HyperFrames compositions.

Why does my SSIM diff fail even though the translation looks correct?▼

Common causes are mismatched pixel formats between renders, system font fallback divergence between the two Chromium builds (about 0.025 SSIM), or timing errors in springs and scene boundaries. Use frame_strip.sh to see which frames diverged, then consult the timing or sequencing references.

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
EmasoftEmasoft

amw-hyperframes-bridge

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

Community
Advanced
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