skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

remotion-to-hyperframes

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

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

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, easings, sequences, and media props all need precise mapping to a seek-driven HTML/GSAP 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 render diffs. ## Core Features & Use Cases - Source linting: scripts/lint_source.py scans Remotion .ts/.tsx files and classifies findings as blockers (useState, useReducer, useEffect with deps, async calculateMetadata, third-party React UI libraries), warnings (@remotion/lambda, delayRender, useMemo), or info (staticFile, interpolateColors), recommending the runtime interop pattern from PR #214 when blockers appear. - Guided translation: references/ map every Remotion API (Composition, Sequence, Series, interpolate, spring, Easing, Audio, Video, Img, Lottie, fonts, TransitionSeries, Zod props) to its HyperFrames equivalent, emitting a single index.html with data-* attributes and one paused gsap.timeline registered on window.__timelines. - Measured validation: scripts/render_diff.sh computes per-frame SSIM between the Remotion baseline and the HyperFrames render against tier-calibrated thresholds (T1–T3), and scripts/frame_strip.sh produces side-by-side frame strips to debug failures. - Use Case: A user says "port my Remotion project to HyperFrames" — the Skill lints the source, translates the composition, renders both versions, and confirms visual equivalence with a mean SSIM above the tier threshold, writing TRANSLATION_NOTES.md for any dropped constructs. ## Quick Start Ask the agent to port your Remotion composition to HyperFrames by pointing it at your Remotion source directory and requesting a validated translation with an SSIM render diff.

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 lint_source.py on the Remotion source first to detect blockers, then follow the API mapping references to emit an index.html with data-* attributes and 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 APIs map to HyperFrames equivalents?▼

Sequence becomes a div with data-start/data-duration, interpolate becomes gsap.to tweens, spring maps to back.out easings, and Audio/Video/Img become HTML media elements with data-track-index. The references/api-map.md table covers Composition, Series, Lottie, fonts, and transitions.

Can Remotion code using useState or useEffect be translated?▼

No. Compositions driving animation via useState, useReducer, or useEffect with non-empty dependencies break HyperFrames' seek-driven deterministic model. The linter flags these as blockers and recommends the runtime interop pattern from PR #214, which mounts a Remotion Player inside HyperFrames.

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 translation drops the @remotion/lambda imports and renderMediaOnLambda calls, then documents the gap in TRANSLATION_NOTES.md since HyperFrames renders single-machine.

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

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, then use frame_strip.sh to inspect diverging frames.

When should I build a fresh HyperFrames composition instead of porting?▼

Build fresh when authoring a new composition, when Remotion is only mentioned in passing, or when the source is not Remotion at all (After Effects, Framer Motion, plain React/CSS). The skill is one-way Remotion-to-HyperFrames only and does not support reverse export.

Related Skills

Explore More Software Engineering Skills→
flaz78flaz78
9

remotion-video

Create and render Remotion videos into MP4 files from local project files.

Community
Intermediate
EmasoftEmasoft

amw-hyperframes-bridge

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

Community
Advanced
Noetfield-SystemsNoetfield-Systems

remotion-to-hyperframes

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

Official
Advanced
Monet-AI-EditorMonet-AI-Editor
109

remotion-best-practices

Guide Remotion compositions with render-safe animation patterns using useCurrentFrame and interpolate.

Official
Intermediate