remotion-to-hyperframes

插件安装： 在运行设置或新鲜度检查命令之前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。

导入到 HyperFrames

HyperFrames 是容器：无论片段中运行什么内容，其轨道、子合成和变量都可以在 Studio 中编辑。将每个部分以其支持的最高级别导入，并记录所用级别。

级别	适用对象	方法	导入后可在 Studio 中编辑的内容
原生	可转换为 HTML + GSAP 的代码：大多数 Remotion、HTML/CSS/GSAP 动画、简单的 Motion Canvas	转换，然后逐帧验证	每个元素；可应用变量、目录和预设
托管	可在浏览器中绘制任意指定帧的代码：canvas、p5.js、Three.js、Lottie、WebGL、其他 JS 动画	保留代码，并使用 HyperFrames 时间驱动它	时间、位置、已公开的参数
媒体	可输出视频或帧的所有内容：Manim、After Effects、Blender、PIL、moviepy	渲染为文件并将其用作片段	剪切、放置、分层；无法编辑其中的像素

依赖墙上时钟时间、实时物理模拟或网络的代码只能作为媒体导入。

原生：转换后验证

1. 对于 Remotion，先运行 python3 <SKILL_DIR>/scripts/lint_source.py <source dir>。阻止项（带依赖项的 useState、useReducer、useEffect、异步 calculateMetadata、MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI 等 React UI 套件）无法转换：请托管或重构移除，不要近似处理（references/escape-hatch.md）。警告项（@remotion/lambda 配置、delayRender、useMemo、自定义钩子）会被舍弃并记录。
2. 转换为 /hyperframes 约定：每个场景对应一个子合成，时间以秒为单位（frame / fps），资源路径相对于根目录。每个 Remotion API 的对应项见 references/api-map.md。将 Remotion 渲染页面规则 * { box-sizing: border-box; } 在根目录 index.html 的 <style> 中添加一次：没有它，每个带边框或内边距的元素都会因边框和内边距而变大。
3. 保持可编辑：源代码的 props 转换为 data-composition-variables，并通过 data-var-text、data-var-src 或 var(--id) 绑定；每个 Sequence 转换为定时片段或子合成；重复使用的组件转换为一个子合成，并通过 data-variable-values 多次挂载。
4. 逐帧比较：npx hyperframes snapshot --at <t,…> --against <original.mp4> 会在每个指定时间保存原始视频的帧，并放在你的帧旁边。为每个场景及每次剪切的前后两侧取样；留意是否有单个元素出现延迟或重新着色，而不仅是整体画面。若要进行评分检查，scripts/render_diff.sh <original.mp4> <hf.mp4> <out> 会逐帧给出 SSIM，scripts/frame_strip.sh 会显示哪些帧存在差异（各复杂度等级的阈值见 references/eval.md）。使用 Config.setVideoImageFormat("png") 和 Config.setColorSpace("bt709") 渲染 Remotion 端，否则差异测量的是编码器（SSIM 约为 0.05）。
5. 将未能顺利转换的内容（舍弃的音量渐变、近似呈现、替换的字体）记录到 TRANSLATION_NOTES.md。

Remotion	阅读
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
无法移植的内容	references/limitations.md

在手动制作源代码中使用的具名视觉效果之前，请运行 npx hyperframes catalog --query "<the visual, in English>" --json 搜索：该命令会对整个注册表进行排序，且无需安装任何内容。

托管

保留代码，让 HyperFrames 掌控时钟：它会根据给定的时间绘制帧。../hyperframes/references/runtimes.md 中介绍了 seek 协议，以及内置的 Lottie、Three.js、anime.js、WAAPI 和 CSS 动画适配器。不要使用 requestAnimationFrame 循环或定时器作为时间来源；只能使用带种子的随机数；如果没有其他方式定义时长，则在根元素上设置 data-duration。

媒体

<video class="clip" data-has-audio="true" src="assets/x.mp4" ...>；如果视频没有声音，则使用 muted。不需要其他设置。

在最终消息中，列出每个导入部分及其级别、用户可以在 Studio 中更改的内容，以及逐帧对比的结果。