SuperAPI AI 工具集

remotion-to-hyperframes

设计与创作

查看项目

更新于 10-28 21:24

技能介绍

用途:将现有 Remotion(React)视频合成源码翻译为 HyperFrames(HTML + GSAP)合成,属于单向迁移工具。技能说明称约 80% 的典型合成可机械对应翻译,其余不适合 HyperFrames seek 驱动模型的模式会被拒绝,并建议改用运行时互操作方案(PR #214)。

主要能力:提供 Remotion API 到 HyperFrames 的映射参考(参数、序列、时间、媒体、转场、Lottie、字体等按需加载);运行 lint 脚本检测阻塞项(useState、useReducer、带非空依赖的 useEffect/useLayoutEffect、异步 calculateMetadata、第三方 React UI 库)与警告项(@remotion/lambda 配置、delayRender、useCallback、useMemo、自定义 hooks);对无对应 API 的视觉效果可通过 npx hyperframes catalog 检索现成组件;生成 index.html 与按场景拆分的 compositions/<scene>.html;提供基于测试语料(T1–T4)和 SSIM 阈值的验证流程;输出 TRANSLATION_NOTES.md 记录未干净翻译之处。

使用方式:仅在用户明确要求从 Remotion 迁移时触发(如“port my Remotion project”“convert this Remotion code”“migrate from Remotion”)。流程:Step 1 对源码目录运行 scripts/lint_source.py;Step 2 阅读 references/api-map.md 并按源码用到的 API 加载对应专题参考;Step 3 生成 HyperFrames 合成(根 div#stage 携带 data-composition-id、data-start、data-duration、data-fps、data-width、data-height 及标量 prop 的 data-*;每个场景一个宿主 div 与一个模板子合成,内含内联样式和一个 paused 的 gsap.timeline,并挂到 window.__timelines);Step 4 用 Remotion 渲染基线、HyperFrames 渲染翻译结果,再用 scripts/render_diff.sh 做 SSIM 对比(两侧需统一像素格式:Config.setVideoImageFormat("png") 与 Config.setColorSpace("bt709"),否则差异会来自编码器而非翻译保真度);Step 5 编写 TRANSLATION_NOTES.md。另有 ./assets/test-corpus/run.sh 运行 T1–T3 渲染对比与 T4 lint 验证,并输出汇总 JSON 报告。安装说明提及:若技能位于 HyperFrames 插件内需遵循插件执行规则;独立安装可用 npx hyperframes skills update remotion-to-hyperframes 更新技能(运行前需征得用户确认)。

适用场景:用户明确要求把已有 Remotion 合成源码迁移为 HyperFrames 时。不适用:新建 HyperFrames 合成;用户顺带提及 Remotion;用户仅把 Remotion 代码作参考;用户只要求“做出和 Remotion 版一样的视频”而未要求迁移源码。不支持:反向导出 HyperFrames 到 Remotion 或其他框架;翻译非 Remotion 来源(After Effects .aep、Framer Motion、纯 React/CSS 动画等)。另外,基于 useState + useEffect 驱动动画的 React 状态机不翻译,建议改用运行时互操作模式;@remotion/lambda 配置作为警告项丢弃后翻译其余部分。

限制:lint 命中阻塞项即停止并给出替代建议;警告项需丢弃相应构造并在笔记中说明;视觉效果在目录检索无合适组件时需手写 GSAP 并记录替换;翻译后须运行评估,SSIM 低于验证基准则视为隐性错误。已验证基线(截至 2026-04-27):T1 单元素淡入 SSIM 0.974(阈值 0.95)、T2 多场景+弹簧+音频+图片 0.985(0.95)、T3 数据驱动+自定义子组件+计数 0.953(0.90)、T4 逃逸舱 8 个 lint 用例 8/8 通过。具体收费标准、平台支持范围等资料未提供。