skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

remotion-to-hyperframes

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

Updated Jun 20, 2026
Search Tags:#react#code translation#gsap#remotion#hyperframes#video migration#ssim validation
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill remotion-to-hyperframes-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill remotion-to-hyperframes-noetfield-systems

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, spring easings, sequencing offsets, and asset paths all need manual conversion, and some React patterns (useState, useEffect side effects, async metadata) silently produce broken output. This Skill encodes the full API mapping, lints the source for untranslatable patterns, and validates the result with per-frame SSIM diffs against the Remotion baseline. ## 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: Topic references cover sequencing, timing/springs/easings, media, transitions, Lottie, fonts, and parameters, mapping every Remotion API to its HyperFrames HTML + GSAP equivalent. - Measured validation harness: render_diff.sh computes per-frame SSIM between the Remotion baseline and the HF render, 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 "port my Remotion project to HyperFrames" — the Skill lints the source, generates an index.html with a paused GSAP timeline, renders both versions, and confirms the translation holds ≥0.95 mean SSIM while writing a TRANSLATION_NOTES.md for any dropped constructs like @remotion/lambda config. ## Quick Start Ask the AI 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 blockers, then follow the API map to emit an index.html with a paused GSAP timeline. Validate by rendering both versions and running render_diff.sh to compare per-frame SSIM against the tier threshold.

Which Remotion patterns cannot be translated to HyperFrames?▼

useState, useReducer, useEffect with non-empty dependencies, async calculateMetadata, and third-party React UI libraries like MUI or Chakra are blockers. For these, the recommended path is the runtime interop pattern from PR #214, which mounts a Remotion Player inside HyperFrames.

Does @remotion/lambda block translation to HyperFrames?▼

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 and documents the gap in TRANSLATION_NOTES.md.

How is translation quality between Remotion and HyperFrames measured?▼

Quality is measured with per-frame SSIM via ffmpeg, comparing the Remotion baseline render against the HyperFrames render. Validated thresholds are 0.95 for simple and multi-scene tiers and 0.90 for data-driven compositions, with frame strips generated for debugging failures.

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

Mismatched pixel formats are the common cause: Remotion's default JPEG output uses yuvj420p while HyperFrames outputs yuv420p, costing about 0.05 SSIM. Set Config.setVideoImageFormat("png") and Config.setColorSpace("bt709") in remotion.config.ts before rendering the baseline.

How do Remotion springs map to GSAP easings?▼

Remotion spring configs map approximately to GSAP back.out easings: damping 12 with stiffness 100 becomes back.out(1.4) over roughly 0.7 seconds. The mapping is lossy but validated to hold above 0.95 SSIM on real compositions.

Related Skills

Explore More Software Engineering Skills→
potentialIncpotentialInc

remotion-generate-video

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

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