skills.rest
kitfunso
kitfunsoCOMMUNITY
Explore all skills by this author →
Website𝕏@keithso27GitHub

remotion-to-hyperframes

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

Updated May 22, 2026
Search Tags:#React#code translation#gsap#remotion#hyperframes#video migration#SSIM validation
One-click install
npx skills add https://github.com/kitfunso/claude-config --skill remotion-to-hyperframes-kitfunso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/kitfunso/claude-config/tree/main/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/kitfunso/claude-config --skill remotion-to-hyperframes-kitfunso

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Migrating an existing Remotion (React) video composition to HyperFrames by hand is error-prone: frame-based timing, springs, sequences, and media props all need faithful translation into HTML plus paused GSAP timelines, and silent visual regressions are hard to catch without measurement. ## Core Features & Use Cases - Source linting with blockers and warnings: scripts/lint_source.py detects untranslatable patterns (useState, useEffect with deps, async calculateMetadata, third-party React UI libraries) and recommends the runtime interop pattern instead of producing broken output. - API mapping references: per-topic guides cover sequencing, timing/easing, media, transitions, Lottie, fonts, and parameters so each Remotion API gets a concrete HyperFrames equivalent. - Measured validation: render_diff.sh computes per-frame SSIM against a Remotion baseline, frame_strip.sh visualizes diverging frames, and a tiered test corpus (T1-T4) gates translation quality. - Use Case: A user says "port my Remotion project to HyperFrames" — the skill lints the source, translates scenes into sub-composition HTML files, renders both versions, and verifies the SSIM diff passes the tier threshold. ## 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 project to HyperFrames?▼

Run the lint script over your Remotion source first to catch blockers, then translate each Sequence into a sub-composition HTML file with a paused GSAP timeline. Finally render both versions and compare them with the SSIM diff script to confirm fidelity.

How does Remotion spring() map to GSAP easing?▼

Remotion spring configs translate approximately to GSAP back.out easings; for example damping 12 and stiffness 100 maps to back.out(1.4) over about 0.7 seconds. The mapping is lossy but validated to hold above 0.95 SSIM in the test corpus.

Can Remotion compositions using useState be translated to HyperFrames?▼

No. Compositions that drive animation with useState, useReducer, or useEffect with dependencies break HyperFrames' seek-driven deterministic model. The skill refuses translation and recommends the runtime interop pattern from PR #214 instead.

Does the translation support @remotion/lambda configurations?▼

Lambda config is treated as a warning, not a blocker, because it is deployment configuration orthogonal to the rendered composition. The skill drops the @remotion/lambda imports and renderMediaOnLambda calls, then documents the gap in TRANSLATION_NOTES.md.

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

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

What Remotion patterns can never be translated to HyperFrames?▼

Async calculateMetadata, third-party React UI libraries like MUI or Chakra, and state-driven animation are hard blockers. Out-of-scope items include HDR rendering, variable frame rate, multi-composition lists, and the reverse direction of exporting HyperFrames back to Remotion.

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
simpletibrsimpletibr
9

hyperframes-cli

Validates, previews, and renders HyperFrames video compositions via the npx CLI.

Official
Intermediate
AnderHonoratoAnderHonorato

hyperframes-registry

Installs and wires registry blocks and components into HyperFrames video compositions.

Community
Advanced
gmolikegmolike

remotion-to-hyperframes

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

Community
Advanced