skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

remotion-to-hyperframes

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

Updated Jul 16, 2026
Search Tags:#react#migration#video#gsap#remotion#ssim#hyperframes
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill remotion-to-hyperframes-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/X-manist/Cohmira --skill remotion-to-hyperframes-x-manist

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, spring physics, sequencing, and media handling all map differently in a seek-driven HTML model, and some React patterns (useState, useEffect, async metadata) cannot translate at all. This Skill encodes the full API mapping, lints the source for untranslatable patterns, and validates the result with SSIM-based visual diffing so the port is measurably faithful. ## Core Features & Use Cases - Source linting with blockers and warnings: scripts/lint_source.py detects useState, useReducer, useEffect with dependencies, async calculateMetadata, and third-party React UI libraries as blockers, recommending the runtime interop pattern from PR #214 instead of a broken translation. - Complete API mapping references: Topic references cover sequencing, timing (interpolate, spring, Easing), media (Audio, Video, Img, IFrame), transitions, Lottie, fonts, and Zod parameters, translating each Remotion idiom into HyperFrames data attributes and GSAP tweens. - SSIM validation harness: render_diff.sh and frame_strip.sh compare the Remotion baseline render against the HyperFrames output frame-by-frame, with calibrated per-tier thresholds (T1-T4) and a test corpus for regression checking. - Use Case: A user says "port my Remotion project to HyperFrames". The Skill lints the source, loads only the relevant mapping references, emits an index.html with a paused GSAP timeline, renders both versions, and confirms the translation passes the SSIM threshold while writing TRANSLATION_NOTES.md for any dropped constructs like @remotion/lambda config. ## Quick Start Ask the agent to port your existing Remotion composition to HyperFrames by pointing it at your Remotion source directory and requesting the migration explicitly.

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 blockers, then translate using the API mapping references: sequences become data-start/data-duration divs, interpolate and spring calls become GSAP tweens on a paused timeline, and staticFile assets move into an assets folder. Validate by rendering both versions and running the SSIM diff script.

What Remotion patterns cannot be translated to HyperFrames?▼

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

Does the translation support @remotion/lambda projects?▼

Yes, @remotion/lambda is treated as a warning, not a blocker, because Lambda configuration is deployment-related and orthogonal to the rendered composition. The skill drops the lambda imports and renderMediaOnLambda calls, translates the rest of the composition, and documents the gap in TRANSLATION_NOTES.md.

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

Both versions are rendered to MP4 and compared frame-by-frame with ffmpeg SSIM via render_diff.sh, producing mean, min, p05, and p95 scores against tier-specific thresholds (0.90-0.95). Both renders must use matching pixel formats (PNG image format, bt709 color space) or the diff measures encoder differences instead of translation fidelity.

Can I convert After Effects or Framer Motion animations with this skill?▼

No, the translation is one-way and Remotion-only. Non-Remotion sources like After Effects projects, Framer Motion, or plain React/CSS animations have no Remotion source to translate and should be re-created natively using the general HyperFrames authoring workflow.

Why does my translated video look slightly different from the Remotion original?▼

The dominant noise source is system font fallback divergence between the bundled Chromium versions, costing about 0.025 mean SSIM at large font weights. Loading an explicit font like Inter via Google Fonts eliminates most drift; spring-to-back.out easing approximations can also contribute small differences.

Related Skills

Explore More Software Engineering Skills→
potentialIncpotentialInc

remotion-generate-video

Generate 1080x1920 30fps Remotion videos with ElevenLabs TTS narration.

Official
Intermediate
hoanghd218hoanghd218
7

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML timelines.

Community
Advanced
wesleysimpliciowesleysimplicio
1

remotion-to-hyperframes

Translate Remotion video compositions into HyperFrames HTML with GSAP.

Community
Advanced
heygen-comheygen-com
40.2k

remotion-to-hyperframes

Translate Remotion compositions into HyperFrames HTML+GSAP timelines.

Official
Advanced