What problem does it solve? Porting a Remotion (React-based) video composition to HyperFrames by hand is error-prone: timing math, easing curves, sequencing offsets, and media handling all differ between the two frameworks, and some React patterns (useState, side effects, async metadata) cannot be translated 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 detects blockers (useState, useEffect with deps, async calculateMetadata, third-party React UI libraries) and recommends the runtime interop pattern from PR #214 instead of producing broken output. - Complete API mapping references: per-topic guides cover sequencing, timing/springs/easings, media, transitions, Lottie, fonts, and parameters, mapping every Remotion API to its HyperFrames equivalent. - Measured validation: render_diff.sh computes per-frame SSIM against the Remotion baseline with tiered thresholds (T1–T3), and frame_strip.sh produces side-by-side comparison strips for debugging failures. - Use Case: Given a Remotion project with sequences, springs, audio, and data-driven subcomponents, generate an equivalent HyperFrames index.html with a paused GSAP timeline, then verify the translation scores above the SSIM threshold for its complexity tier. ## 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.
