Remotion To Hyperframes — Remotion 到 Hyperframes

Remotion 到 HyperFrames 概述 将 Remotion（基于 React）的视频组合翻译成 HyperFrames（HTML + GSAP）的组合。大多数 Remotion 习语都有直接的 HyperFrames 等价物——对于约 80% 的典型组合，翻译是机械的。本技能编码了映射，并通过拒绝翻译不符合 HF 的 seek 驱动模型的模式以及推荐 PR #214 中的运行时 interop 模式来防止损失约 20% 的信息。该技能附带一个分级的测试语料库（T1–T4，共 4 个测试用例），用于根据测量的 SSIM 阈值对翻译进行评分。在运行评估之前不要进行翻译——如果翻译“看起来正确”，但渲染的 SSIM 低于验证基线 0.05，则它是错误的。

何时使用 仅当用户明确要求从 Remotion 迁移时使用此技能。示例触发短语：“将我的 Remotion 项目移植到 HyperFrames”、“将此 Remotion 代码转换为 HyperFrames”、“从 Remotion 迁移”、“翻译此 Remotion 组合”、“将其重写为 HyperFrames HTML”。

何时不使用 （a）用户正在创建新的 HyperFrames 组合，即使他们有或正在 A/B 测试类似的 Remotion 视频。 （b）用户在不要求迁移的情况下提到了 Remotion。 （c）用户作为参考材料共享 Remotion 代码，而不是要求翻译。 （d）用户要求“与我的 Remotion 视频相同”，但没有明确要求迁移源代码——将其视为新的 HyperFrames 构建。

工作流 步骤 1：检查源代码 运行 scripts/lint_source.py 脚本检查 Remotion 源目录。检查检测到无法清晰翻译的模式： 阻塞（拒绝 + 推荐 interop）：useState、useReducer、useEffect/useLayoutEffect 具有非空依赖、async calculateMetadata、第三方 React UI 库（MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI）。 警告（翻译后删除构造）：@remotion/lambda 配置、delayRender、useCallback、useMemo、自定义钩子。 信息（翻译并附注）：staticFile、interpolateColors。 如果任何阻塞发生，请停止。阅读 references/escape-hatch.md 并显示推荐消息。警告不会停止翻译——在步骤 3 中删除有问题的构造并在 TRANSLATION_NOTES.md 中注明差异。@remotion/lambda 配置是规范警告情况：技能删除导入 + renderMediaOnLambda(...) 调用，但翻译了组合的其余部分。

步骤 2：规划翻译 阅读 references/api-map.md——Remotion API 和其 HF 等价物或每个主题参考的索引。根据源代码使用的内容确定需要哪些主题参考： 源代码包含 Load reference Composition、defaultProps、schema、calculateMetadata 参数.md 序列、系列、循环、绝对填充、冻结 sequencing.md useCurrentFrame、interpolate、spring、Easing、interpolateColors timing.md 音频、视频、图像、IFrame、staticFile、delayRender media.md 过渡系列、@remotion/过渡 transitions.md @remotion/lottie lottie.md @remotion/google-fonts/、Font.loadFont、@font-face fonts.md 不要加载所有内容——仅加载源代码需要的内容。

步骤 3：生成 HF 组合 发出 index.html，包含： 根