skills.rest
CodeWithSally
CodeWithSallyOFFICIAL
Explore all skills by this author →
GitHub

remotion-to-hyperframes

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

13|17|Updated Jan 30, 2025
Search Tags:#react#code translation#gsap#remotion#ssim#hyperframes#video migration
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill remotion-to-hyperframes-codewithsally
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill remotion-to-hyperframes-codewithsally

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Porting an existing Remotion (React) video composition to HyperFrames by hand is error-prone: frame-based timing, spring physics, sequencing, and media handling all map differently, and some React patterns (state, effects, third-party UI libraries) 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. ## Core Features & Use Cases - Source linting with escape hatch: scripts/lint_source.py scans the Remotion project and classifies findings as blockers (useState, useEffect with deps, async calculateMetadata, third-party React UI), warnings (@remotion/lambda, delayRender, useMemo), or info, recommending the runtime interop pattern from PR #214 when translation would be lossy. - Complete API translation references: Per-topic guides cover sequencing (Sequence/Series/Loop), timing (interpolate/spring/Easing to GSAP easings), media (Audio/Video/Img/staticFile), transitions, Lottie, fonts, and Zod parameters. - Measured validation: render_diff.sh computes per-frame SSIM between the Remotion baseline and the HyperFrames render against tier-calibrated thresholds, and frame_strip.sh produces side-by-side frame strips for debugging failures. - Use Case: A user asks to migrate their Remotion marketing video to HyperFrames. The Skill lints the source, translates the composition into 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. ## Quick Start Ask the assistant to port your Remotion composition to HyperFrames by pointing it at your Remotion source directory and requesting a one-way 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, and validate by rendering both versions and comparing them with the SSIM diff script. The workflow is lint, translate, render, diff, then document gaps in TRANSLATION_NOTES.md.

Which Remotion APIs map to HyperFrames equivalents?▼

Sequence becomes a div with data-start and data-duration, interpolate becomes GSAP tweens with ease none, spring maps to back.out, and Audio/Video/Img become HTML media elements with data attributes. The api-map reference lists every mapping, with per-topic files for timing, sequencing, media, transitions, Lottie, and fonts.

Can Remotion compositions using useState or useEffect be translated?▼

No. Compositions that drive animation via useState, useReducer, or useEffect with non-empty dependencies are blockers because they break HyperFrames' seek-driven deterministic frame model. The recommended path is the runtime interop pattern from PR #214, which mounts a Remotion Player inside HyperFrames.

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

The render_diff.sh script computes per-frame SSIM between the Remotion baseline and the HyperFrames render, producing a summary with mean, min, and percentile scores checked against tier thresholds (0.90-0.95). Both renders must use matching pixel formats, otherwise encoder differences distort the score.

Does the migration support @remotion/lambda configurations?▼

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

What are the limitations of Remotion to HyperFrames translation?▼

Volume ramps on Audio, stateful Loop children, custom transition presentations reading useCurrentFrame, and React.lazy boundaries translate only with caveats or not at all. The reverse direction (HyperFrames to Remotion) and non-Remotion sources like After Effects are explicitly out of scope.

Related Skills

Explore More Software Engineering Skills→
celeroncoderceleroncoder

remotion-to-hyperframes

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

Community
Advanced
EmasoftEmasoft

amw-hyperframes-bridge

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

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