用途:把已有的 Remotion(React)合成源码翻译成 HyperFrames(HTML + GSAP)合成,为单向迁移,约八成常见写法可机械对应,其余部分通过拒绝不兼容模式来规避有损翻译。
使用前提:仅在用户明确要求移植/转换/迁移/翻译 Remotion 源码时使用;新创作 HyperFrames、顺带提及 Remotion、把 Remotion 代码当参考、或只说“要同样的视频”都不适用,应改走原生创作流程。不支持反向导出到 Remotion 或其它框架,也不支持 After Effects、Framer Motion、纯 React/CSS 等非 Remotion 来源。
主要流程:先可确认后运行 npx hyperframes skills update remotion-to-hyperframes 更新技能;用 scripts/lint_source.py 检查源码,useState、useReducer、带依赖的 useEffect/useLayoutEffect、异步 calculateMetadata、第三方 React UI 库等为阻断项,遇到即停止并推荐 interop 方案;@remotion/lambda 配置、delayRender、useCallback、useMemo、自定义 hooks 为警告项,可丢弃该构造后继续并记录;staticFile、interpolateColors 为提示项。随后按源码内容加载对应参考(parameters、sequencing、timing、media、transitions、lottie、fonts),生成 index.html:含带 data-* 的 stage 根节点、场景 div 列表、内联样式,以及底部单个暂停的 gsap.timeline,并通过 window.__timelines 注册时间轴。
验证与限制:用 eval 与 SSIM 对比,双方渲染需统一像素格式(在 remotion.config.ts 设置 Config.setVideoImageFormat("png") 与 Config.setColorSpace("bt709")),否则差异来自编码器。无法干净翻译之处写入 TRANSLATION_NOTES.md。该技能不翻译 React 状态机,也不并行运行 Remotion 渲染管线;具体收费、价格、平台等信息暂未提供。