skills.rest
Sergiotsk
SergiotskCOMMUNITY
Explore all skills by this author →
GitHub

remotion-to-hyperframes

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

Updated Aug 25, 2026
Search Tags:#React#migration#video#gsap#remotion#ssim#hyperframes
One-click install
npx skills add https://github.com/Sergiotsk/Interstellar --skill remotion-to-hyperframes-sergiotsk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-to-hyperframes
Source: https://github.com/Sergiotsk/Interstellar/tree/main/.agents/skills/remotion-to-hyperframes
Command: npx skills add https://github.com/Sergiotsk/Interstellar --skill remotion-to-hyperframes-sergiotsk

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, spring physics, sequencing, and media handling all map differently, and some React patterns silently produce broken output. This Skill encodes the full API mapping, lints the source for untranslatable patterns, and validates the result with SSIM render diffs. ## Core Features & Use Cases - Source linting: scripts/lint_source.py scans the Remotion project and classifies findings as blockers (useState, useEffect with deps, async calculateMetadata, third-party React UI libraries), warnings (@remotion/lambda, delayRender, useMemo), or info (staticFile, interpolateColors), refusing translation when blockers exist and recommending the runtime interop pattern instead. - API translation references: Per-topic mapping guides cover composition parameters, sequencing, timing/springs/easings, media, transitions, Lottie, and fonts, converting Remotion idioms into data-* attributes and a single paused GSAP timeline. - Measured validation: scripts/render_diff.sh computes per-frame SSIM between the Remotion baseline and the HyperFrames render against tier-calibrated thresholds, and scripts/frame_strip.sh produces side-by-side frame strips for debugging failures. - Use Case: Given a Remotion project with a multi-scene composition using springs, audio, and staggered stat cards, lint the source, translate it to an index.html HyperFrames composition, render both versions, and confirm the translation passes the SSIM threshold before shipping. ## Quick Start Ask the AI to port your Remotion composition to HyperFrames by pointing it at your Remotion source directory and requesting a validated translation.

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 finally validate by rendering both versions and comparing them with the SSIM diff script. Blockers like useState mean you should use the runtime interop pattern instead.

What Remotion patterns cannot be translated to HyperFrames?▼

Blockers include useState and useReducer driving animation, 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 runtime interop pattern from PR #214 is recommended.

Does @remotion/lambda block a HyperFrames migration?▼

No, @remotion/lambda is a warning, not a blocker, because Lambda configuration is deployment infrastructure orthogonal to the rendered composition. The translation drops the Lambda imports and renderMediaOnLambda calls and records 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, which outputs mean, min, p05, and p95 scores against a threshold. Both renders must use matching pixel format (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 approach?▼

No, the translation only works from actual Remotion React source code. After Effects projects, Framer Motion, plain React, or CSS animations have no Remotion source to translate and should be re-created natively as a fresh HyperFrames composition.

Why do translated videos look slightly different in font weight?▼

System font fallback diverges between Remotion's bundled Chromium and HyperFrames' chrome-headless-shell, costing roughly 0.025 mean SSIM at large font weights. Loading an explicit font like Inter via Google Fonts eliminates this noise floor.

Related Skills

Explore More Software Engineering Skills→
potentialIncpotentialInc

remotion-generate-video

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

Official
Intermediate
simpletibrsimpletibr
9

hyperframes-cli

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

Official
Intermediate
celeroncoderceleroncoder

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions.

Community
Advanced
gmolikegmolike

remotion-to-hyperframes

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

Community
Advanced