SuperAPI AI 工具集

remotion-to-framevideo

设计与创作

查看项目

更新于 10-16 03:42

技能介绍

用途:把已有的 Remotion(基于 React)视频合成翻译成 FrameVideo(HTML + GSAP)合成。仅在用户明确要求移植、转换、迁移 Remotion 项目时使用;若用户只是新建 FrameVideo 合成、顺带提到 Remotion、把 Remotion 代码当参考,或只说“要和我 Remotion 里一样的视频”,则不应使用,应改用 framevideo 技能原生编写。

主要能力:内置 Remotion API 到 FrameVideo 的映射参考,覆盖参数、序列、时间、媒体、转场、Lottie、字体等主题;提供源码 lint 脚本,识别无法干净翻译的模式。阻断项包括 useState、useReducer、带非空依赖的 useEffect/useLayoutEffect、异步 calculateMetadata、第三方 React UI 库(MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI),命中即停止并建议互操作方案。警告项包括 @remotion/lambda 配置、delayRender、useCallback、useMemo、自定义 hooks,翻译时丢弃并在 TRANSLATION_NOTES.md 记录。

使用方式:先对 Remotion 源码目录运行 scripts/lint_source.py;再按源码所用 API 只加载对应参考;然后生成 index.html,包含带 data-composition-id、data-start、data-duration、data-fps、data-width、data-height 的根 div,扁平场景 div 列表,内联样式,以及底部一个暂停的 gsap.timeline,并用 window.__timelines["<composition-id>"] = tl 注册。随后运行评测:在 remotion-src 中执行 npx remotion render <CompositionId> out/baseline.mp4,在 fv-src 中执行 npx framevideo render --output ../fv.mp4,再用 scripts/render_diff.sh 做 SSIM 对比。两次渲染须使用匹配像素格式,在 remotion.config.ts 中设置 Config.setVideoImageFormat("png") 与 Config.setColorSpace("bt709"),否则差异反映的是编码器差别。最后用 TRANSLATION_NOTES.md 记录未干净翻译之处。

适用场景与限制:适合以 useCurrentFrame 等确定性帧驱动为主的合成。不翻译 React 状态机,也不并行运行 Remotion 渲染管线,后者属于 PR #214 的运行时互操作方案。@remotion/lambda 不是阻断项,仅作为警告丢弃。可用 ./assets/test-corpus/run.sh 运行 T1–T4 测试语料自检,截至 2026-04-27 的基线为 T1 平均 SSIM 0.974、T2 0.985、T3 0.953、T4 8/8 通过。具体安装与依赖细节暂未提供。