用途:把 Remotion(基于 React)的视频合成翻译为 HyperFrames(HTML + GSAP)合成。仅当用户明确要求迁移时使用,例如要求把 Remotion 项目移植、转换或重写为 HyperFrames。撰写新的 HyperFrames 合成、顺带提及 Remotion、仅把 Remotion 代码当参考资料、或未明确要求迁移时,不应使用本技能,应改用 hyperframes 技能原生创作。
主要能力:约 80% 的常见 Remotion 写法可机械翻译,技能编码了这套映射关系;对不适合 HyperFrames seek 驱动模型的部分会拒绝翻译,并建议采用 PR #214 的运行时互操作模式。附带 T1–T4 分级测试语料(4 个 fixture),按实测 SSIM 阈值评分。
使用方式:先对 Remotion 源码目录运行 scripts/lint_source.py 检查。阻塞项包括 useState、useReducer、非空依赖的 useEffect/useLayoutEffect、异步 calculateMetadata、第三方 React UI 库(MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI),触发即停止并读 references/escape-hatch.md;警告项包括 @remotion/lambda 配置、delayRender、useCallback、useMemo、自定义 hooks,可删除后继续;提示项包括 staticFile、interpolateColors。随后按源码所用 API 选择性加载 references 中的 parameters、sequencing、timing、media、transitions、lottie、fonts 等参考。生成 index.html:根 div#stage 带 data-composition-id、data-start、data-duration、data-fps、data-width、data-height 及每个标量 prop 的 data-*;扁平的场景 div 列表带 data-start/data-duration/data-track-index;内联 style 设置动画属性初值;底部单个 script 含一个暂停的 gsap.timeline,并注册 window.__timelines["<composition-id>"]。之后运行评测:在 remotion-src 中执行 npx remotion render <CompositionId> out/baseline.mp4,在 hf-src 中执行 npx hyperframes render --output ../hf.mp4,再执行 ../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff。阈值约为该复杂度档 p05 以下 0.02;失败则用 scripts/frame_strip.sh 定位偏差帧。两次渲染须使用相同像素格式,需在 remotion.config.ts 设置 Config.setVideoImageFormat("png") 与 Config.setColorSpace("bt709")。
适用场景:显式迁移 Remotion 合成;T1 单元素淡入均 SSIM 0.974(阈值 0.95),T2 多场景+spring+音频+图片 0.985(0.95),T3 数据驱动+自定义子组件+计数 0.953(0.90),T4 逃离舱 8 个 lint 用例全部通过。可用 ./assets/test-corpus/run.sh 端到端验证。
限制:不翻译 React 状态机(useState + useEffect 驱动动画在 seek 模型下不确定),建议运行时互操作;不并行运行 Remotion 渲染管线。@remotion/lambda 属部署而非动画,作为警告删除后翻译其余部分。未干净翻译的内容需写入 TRANSLATION_NOTES.md。