remotion-to-hyperframes

کد ویدئویی Remotion را به HyperFrames منتقل و فریم‌به‌فریم تطبیق می‌دهد.

این اسکیل پروژه‌های Remotion و ابزارهایی مانند Motion Canvas، Lottie، Three.js، p5.js و HTML/CSS را به HyperFrames منتقل می‌کند. بخش‌های قابل‌تبدیل به HTML و GSAP به‌صورت Native، کدهای قابل‌رندر در مرورگر به‌صورت Hosted و خروجی‌های ویدئویی به‌صورت Media وارد می‌شوند.

با lint، نگاشت APIها، حفظ متغیرها و sub-compositionها و مقایسه فریم‌به‌فریم، اختلاف‌های زمانی و بصری سریع‌تر پیدا می‌شوند. نتیجه شامل ثبت محدودیت‌های تبدیل و مشخص‌کردن میزان ویرایش‌پذیری هر بخش در Studio است.

چه چیزی می‌گیرید

بررسی اولیه کد Remotion و شناسایی blockerها و warningها
تبدیل Sequenceها، زمان‌بندی‌ها، assetها و props به قرارداد HyperFrames
انتخاب سطح مناسب Native، Hosted یا Media برای هر بخش پروژه
مقایسه فریم‌به‌فریم با ویدئوی اصلی و گزارش اختلاف‌ها
ثبت موارد ترجمه‌نشده در TRANSLATION_NOTES.md

برای چه کاری خوب است

تیم‌هایی که می‌خواهند پروژه‌های Remotion را به HyperFrames منتقل کنند
پروژه‌هایی که باید بخشی از انیمیشن قبلی را دوباره استفاده و در Studio ویرایش کنند
مهاجرت کدهای Motion Canvas، Lottie، Three.js، p5.js یا HTML animation به یک timeline مشترک
تطبیق دقیق خروجی جدید با ویدئوی مرجع، مخصوصاً در cutها و صحنه‌های حساس

برای چه کاری نیست

انیمیشن‌هایی که به زمان واقعی، فیزیک زنده یا شبکه وابسته‌اند و باید بدون بازطراحی به‌صورت Media وارد شوند
پروژه‌هایی که نیازی به مهاجرت، ویرایش‌پذیری در HyperFrames یا مقایسه با خروجی اصلی ندارند
کدهایی که فقط با UI kitهای React یا وابستگی‌های غیرقابل‌تبدیل کار می‌کنند، بدون امکان refactor یا hosting

دربارهٔ این اسکیل

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

Import into HyperFrames

HyperFrames is the container: its tracks, sub-compositions and variables are editable in Studio whatever runs inside a clip. Bring each part in at the highest level it supports and record which level you used.

Level	For	How	Editable in Studio afterwards
Native	code that can become HTML + GSAP: most Remotion, HTML/CSS/GSAP animation, simple Motion Canvas	translate it, then verify frame by frame	every element; variables, catalog, presets apply
Hosted	code that can draw any requested frame in a browser: canvas, p5.js, Three.js, Lottie, WebGL, other JS animation	keep the code and drive it from HyperFrames time	timing, position, exposed parameters
Media	anything that outputs video or frames: Manim, After Effects, Blender, PIL, moviepy	render to a file and use it as a clip	cut, place, layer; not the pixels inside

Code that depends on wall-clock time, live physics or the network can only come in as media.

Native: translate, then verify

For Remotion, run python3 <SKILL_DIR>/scripts/lint_source.py <source dir> first. Blockers (useState, useReducer, useEffect with dependencies, async calculateMetadata, React UI kits such as MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI) don't translate: host them or refactor them out, never approximate (references/escape-hatch.md). Warnings (@remotion/lambda config, delayRender, useMemo, custom hooks) are dropped and noted.
Translate to the /hyperframes contract: one sub-composition per scene, times in seconds (frame / fps), asset paths root-relative. Each Remotion API's equivalent is in references/api-map.md.
Keep it editable: the source's props become data-composition-variables bound with data-var-text, data-var-src or var(--id); each Sequence becomes a timed clip or a sub-composition; a reused component becomes one sub-composition mounted several times with data-variable-values.
Compare frame by frame: npx hyperframes snapshot --at <t,…> --against <original.mp4> saves the original's frame at each time next to yours. Sample every scene and both sides of every cut; look for one late or recoloured element, not only the overall picture. For a scored check, scripts/render_diff.sh <original.mp4> <hf.mp4> <out> gives SSIM per frame and scripts/frame_strip.sh shows which frames diverged (thresholds per complexity tier in references/eval.md). Render the Remotion side with Config.setVideoImageFormat("png") and Config.setColorSpace("bt709"), or the diff measures the encoders (about 0.05 SSIM).
Write what didn't translate cleanly (dropped volume ramps, approximated presentations, substituted fonts) to TRANSLATION_NOTES.md.

Remotion	Read
`Composition`, `defaultProps`, `schema`, `calculateMetadata`	`references/parameters.md`
`Sequence`, `Series`, `Loop`, `AbsoluteFill`, `Freeze`	`references/sequencing.md`
`useCurrentFrame`, `interpolate`, `spring`, `Easing`, `interpolateColors`	`references/timing.md`
`Audio`, `Video`, `Img`, `IFrame`, `staticFile`, `delayRender`	`references/media.md`
`TransitionSeries`, `@remotion/transitions`	`references/transitions.md`
`@remotion/lottie`	`references/lottie.md`
`@remotion/google-fonts`, `Font.loadFont`, `@font-face`	`references/fonts.md`
What can't be ported	`references/limitations.md`

Before hand-building a named visual the source used, search npx hyperframes catalog --query "<the visual, in English>" --json: it ranks the whole registry with nothing installed.

Hosted

Keep the code and let HyperFrames own the clock: it draws the frame for the time it is given. The seek protocol and the built-in adapters for Lottie, Three.js, anime.js, WAAPI and CSS animations are in ../hyperframes/references/runtimes.md. No requestAnimationFrame loop or timer as the time source, seeded randomness only, and data-duration on the root when nothing else defines the length.

Media

<video class="clip" data-has-audio="true" src="assets/x.mp4" ...>, or muted when it is silent. Nothing else is needed.

In the final message, list each imported part with its level, what a person can change in Studio, and how the frame-by-frame comparison came out.

دانلود ZIP