HyperFrames 迁移实战用 tier-1-title-card 测试夹具拆解 Remotion → HTML 的时间轴翻译【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文以 skills/remotion-to-hyperframes 迁移技能内置的 T1 测试夹具tier-1-title-card为骨架完整拆解把一段 RemotionReact合成翻译成 HyperFramesHTML GSAP的最小可行路径从useCurrentFrameinterpolate的帧驱动模型到 paused GSAP timeline 的秒驱动模型从AbsoluteFill布局到静态 HTML 结构再到用 SSIM 阈值自动判定翻译保真度的评估闭环。读完本文你将掌握 Remotion→HyperFrames 翻译中最核心的 timing 换算规则time frame / fps、多段插值的一对一 GSAP 映射方法以及如何在本地渲染双基线并用render_diff.sh验证翻译是否看起来正确。背景为什么需要 tiered test corpusHyperFrames 的项目理念是Write HTML. Render video. Built for agents.而remotion-to-hyperframes技能解决的是其中一类明确诉求把已有的 RemotionReact 组件源码单向移植为 HyperFrames 的 HTML 合成见 SKILL.md。该技能默认约 80% 的 Remotion 惯用法都有直接对应物翻译是机械的但剩下约 20% 是有损翻译需要拦截并改走运行时互操作方案。为了防止看起来对但其实错了 0.05 个 SSIM的静默回归技能内置了一套四级测试语料库T1–T4共 4 个夹具全部位于 skills/remotion-to-hyperframes/assets/test-corpusTier组合形态Mean SSIM阈值T1单元素淡入淡出0.9740.95T2多场景 spring 音频 图片0.9850.95T3数据驱动 自定义子组件 数字滚动0.9530.90T4escape-hatch8 个 lint 用例8/8 passn/a本文聚焦的 tier-1-title-card/README.md 就是 T1 的定义文件。它故意只包含最简单的非平凡翻译一个文本元素前 0.5 秒淡入、保持 2.0 秒、最后 0.5 秒淡出没有音频、没有媒体、没有自定义组件。如果连 T1 都过不了说明翻译在最基本的四项上就坏了AbsoluteFill、useCurrentFrame、多段输入interpolate以及 Remotion 帧驱动与 HF 暂停 GSAP 驱动之间的时间偏移。一个最小的 Remotion 合成TitleCard夹具的 Remotion 侧是标准的 Remotion 4.0 项目结构remotion-src/核心组件只有一个。组件源码 TitleCard.tsximport { AbsoluteFill, interpolate, useCurrentFrame } from remotion; export const TitleCard () { const frame useCurrentFrame(); // Fade in 0-15, hold 15-75, fade out 75-90. const opacity interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], { extrapolateLeft: clamp, extrapolateRight: clamp, }); return ( AbsoluteFill style{{ backgroundColor: #0a0a0a, justifyContent: center, alignItems: center, fontFamily: Helvetica, Arial, sans-serif, }} div style{{ fontSize: 160, fontWeight: 800, color: #ffffff, opacity, letterSpacing: 0.05em, }} HELLO /div /AbsoluteFill ); };它包含了两条 Remotion 最核心的 APIuseCurrentFrame()逐帧驱动的唯一数据源组件在每一帧重新求值interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0])四段输入的多段线性插值即 0–15 帧淡入到 1、15–75 帧保持、75–90 帧淡出到 0并显式 clamp 两端外推。合成注册 Root.tsximport { Composition } from remotion; import { TitleCard } from ./TitleCard; export const RemotionRoot () ( Composition idTitleCard component{TitleCard} durationInFrames{90} fps{30} width{1280} height{720} / );合成元数据是翻译时必须继承的契约durationInFrames{90}、fps{30}、1280×720即总时长 90 帧 / 30 fps 3 秒。入口 index.ts 只做registerRoot(RemotionRoot)没有任何额外逻辑。渲染配置 remotion.config.tsimport { Config } from remotion/cli/config; // Match HyperFrames default render so SSIM diffs measure translation // fidelity, not encoder differences. Config.setVideoImageFormat(png); Config.setColorSpace(bt709); Config.setOverwriteOutput(true); Config.setConcurrency(1);这份配置是全套 SSIM 评估成立的前提其原理将在评估一节展开PNG 输出规避了 JPEG 的有限范围/全范围色彩标志差异yuvj420p vs yuv420p否则会白白损失约 0.05 个 SSIMbt709对齐 HF 的 BT.709 SDR 输出串行渲染保证可复现。翻译核心帧驱动 → 秒驱动的 paused GSAP timeline换算规则time frame / fpstiming.md 明确指出这是单一最高杠杆的参考HF 的 timeline 以秒为单位Remotion 以帧为单位换算必须且只需做一次在翻译时而不是运行时time_seconds frame / fps于是 30 fps 下[0, 15, 75, 90]帧映射为[0, 0.5, 2.5, 3.0]秒帧 0 → 0.0 s淡入起点帧 15 → 0.5 s淡入结束 / 保持起点帧 75 → 2.5 s保持结束 / 淡出起点帧 90 → 3.0 s淡出结束 / 合成结束多段 interpolate 的一对一映射T1 的 HF 侧完整实现位于 hf-src/index.html。其结构完全遵循技能约定的四步生成规范见 SKILL.md Step 3根div idstage携带data-composition-id、data-start0、data-duration3、data-fps30、data-width1280、data-height720扁平的场景 div 列表带data-start/data-duration/data-track-index内联style负责布局并把每个被动画属性的from态写进 CSS此处.title { opacity: 0 }底部单个script标签内含一条 pausedgsap.timeline({ paused: true })最后注册window.__timelines[composition-id] tl;交给 HF 运行时。div idstage ># 1. 渲染 Remotion 基线 cd remotion-src npm install npm run render # 渲染结果输出到 remotion-src/out/baseline.mp4 #package.json 中 render 脚本为remotion render TitleCard out/baseline.mp4 # 2. 渲染 HyperFrames 翻译 cd ../hf-src npx hyperframes render --output ../hf.mp4 # 3. 用评估脚本对比从技能 scripts/ 目录执行 ../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff评估脚本的判定逻辑 render_diff.sh该脚本是整套技能最底层的评估原语给定两段视频逐帧计算 SSIM报告是否通过。其行为要点用法render_diff.sh baseline.mp4 translated.mp4 [output-dir]输出ssim.logffmpeg 逐帧行与summary.jsonmean / min / p05 / p95 / frame_count / pass / threshold通过ffmpeg -lavfi ...ssimstats_file...收集逐帧All:分数再用内嵌 python3 解析并计算分布统计量默认阈值 0.85宽松tier 专属阈值由编排脚本通过环境变量R2HF_SSIM_THRESHOLD覆盖T1 即 0.95退出码0 通过、1 失败、2 用法/环境错误缺少 ffmpeg、输入文件不存在等。expected.json 记录了本夹具的标定数据SSIM 阈值 0.952026-04-27 以 remotion4.0PNG 输出、BT.709对比 hyperframes0.4.15-alpha.1 测得的平均 SSIM 为 0.974p05 为 0.972p95 为 0.983。为什么阈值是 0.95以及两个已知的噪声来源expected.json的rationale解释了阈值设计0.95 位于实测 p050.972下方约 0.02——真实的翻译回归错误缓动、错误时长会让平均 SSIM 掉 0.05 以上而 CI 间的编码器/字体漂移被约束在约 0.01两者之间留有清晰的判别带。同时translation_notes明确记录了两个非翻译本身的噪声源理解它们才能正确解读分数字体回退差异双方都未加载字体、走系统 Helvetica/Arial 回退但 Linux 上 Remotion 内置 Chromium 与 HF 的 chrome-headless-shell 回退结果不同——同样的fontWeight: 800在 HF 侧渲染得明显更粗约损失 0.025 平均 SSIM是全套测试中占比最大的非翻译噪声底。像素格式不匹配Remotion 默认 JPEG 输出写的是 yuvj420p全范围而 HF 是 yuv420p有限范围直接比较约损失 0.05 个 SSIM。这正是remotion.config.ts必须显式设置setVideoImageFormat(png)setColorSpace(bt709)的原因——评估测的是翻译保真度而不是编码器差异。从 T1 到整个语料库如何把这条链路复用到你自己的迁移T1 的意义在于它是整条评估链路的最小冒烟测试。它的完整渲染与评估也可以由语料库编排脚本一键执行见 SKILL.md How to grade your own translation./assets/test-corpus/run.sh该脚本依次运行 T1/T2/T3 的渲染 差异对比与 T4 的 lint 校验输出逐 tier 的通过/失败表格并汇总 JSON 报告适合在干净检出上做端到端回归验证。将这条流程迁移到你自己的 Remotion 项目时只需把 T1 的套路按同样顺序走一遍Lint 源运行 scripts/lint_source.py识别 blockeruseState/useReducer、非空依赖的useEffect、异步calculateMetadata、第三方 React UI 库——命中即停止并转互操作方案、warningremotion/lambda配置、delayRender、useCallback/useMemo、自定义 hook——丢弃该构造继续翻译并记录在TRANSLATION_NOTES.md与 infostaticFile、interpolateColors规划映射依据 api-map.md 按源码用到的 API 加载对应主题参考Composition/defaultProps看 parameters.mdSequence/Series/AbsoluteFill看 sequencing.mduseCurrentFrame/interpolate/spring看 timing.md音频视频看 media.md转场看 transitions.md生成 HF 合成按 T1 的index.html结构产出stage 根 div 场景 div 内联样式 单条 paused timeline window.__timelines注册验证渲染双基线并跑render_diff.sh失败时用 frame_strip.sh 抽出逐帧对比定位是哪些帧偏离再回头核对对应的 timing/sequencing/media 参考记录差距把未干净翻译的内容被丢弃的响度曲线、被近似的自定义展示、被替换的字体写进TRANSLATION_NOTES.md格式见 limitations.md。小结tier-1-title-card用 90 帧、一个HELLO、三条 GSAP tween 划定了 Remotion→HyperFrames 翻译的及格线time frame / fps的换算、ease: none对线性插值的精确匹配、CSS 承担from态、paused timeline 承担全部动画求值、以及 PNG/BT.709 下的 SSIM 0.95 门槛实测 0.974。这套夹具同时给出了可复现的评估方法双基线渲染 render_diff.sh逐帧 SSIM expected.json标定数据让迁移是否保真从主观目测变成可量化的阈值判定。理解并跑通 T1就等于掌握了该技能评估链路的全部基础构件可以直接将其复用于任意一个 Remotion 合成的迁移验证。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
HyperFrames 迁移实战：用 tier-1-title-card 测试夹具拆解 Remotion → HTML 的时间轴翻译
HyperFrames 迁移实战用 tier-1-title-card 测试夹具拆解 Remotion → HTML 的时间轴翻译【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文以 skills/remotion-to-hyperframes 迁移技能内置的 T1 测试夹具tier-1-title-card为骨架完整拆解把一段 RemotionReact合成翻译成 HyperFramesHTML GSAP的最小可行路径从useCurrentFrameinterpolate的帧驱动模型到 paused GSAP timeline 的秒驱动模型从AbsoluteFill布局到静态 HTML 结构再到用 SSIM 阈值自动判定翻译保真度的评估闭环。读完本文你将掌握 Remotion→HyperFrames 翻译中最核心的 timing 换算规则time frame / fps、多段插值的一对一 GSAP 映射方法以及如何在本地渲染双基线并用render_diff.sh验证翻译是否看起来正确。背景为什么需要 tiered test corpusHyperFrames 的项目理念是Write HTML. Render video. Built for agents.而remotion-to-hyperframes技能解决的是其中一类明确诉求把已有的 RemotionReact 组件源码单向移植为 HyperFrames 的 HTML 合成见 SKILL.md。该技能默认约 80% 的 Remotion 惯用法都有直接对应物翻译是机械的但剩下约 20% 是有损翻译需要拦截并改走运行时互操作方案。为了防止看起来对但其实错了 0.05 个 SSIM的静默回归技能内置了一套四级测试语料库T1–T4共 4 个夹具全部位于 skills/remotion-to-hyperframes/assets/test-corpusTier组合形态Mean SSIM阈值T1单元素淡入淡出0.9740.95T2多场景 spring 音频 图片0.9850.95T3数据驱动 自定义子组件 数字滚动0.9530.90T4escape-hatch8 个 lint 用例8/8 passn/a本文聚焦的 tier-1-title-card/README.md 就是 T1 的定义文件。它故意只包含最简单的非平凡翻译一个文本元素前 0.5 秒淡入、保持 2.0 秒、最后 0.5 秒淡出没有音频、没有媒体、没有自定义组件。如果连 T1 都过不了说明翻译在最基本的四项上就坏了AbsoluteFill、useCurrentFrame、多段输入interpolate以及 Remotion 帧驱动与 HF 暂停 GSAP 驱动之间的时间偏移。一个最小的 Remotion 合成TitleCard夹具的 Remotion 侧是标准的 Remotion 4.0 项目结构remotion-src/核心组件只有一个。组件源码 TitleCard.tsximport { AbsoluteFill, interpolate, useCurrentFrame } from remotion; export const TitleCard () { const frame useCurrentFrame(); // Fade in 0-15, hold 15-75, fade out 75-90. const opacity interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], { extrapolateLeft: clamp, extrapolateRight: clamp, }); return ( AbsoluteFill style{{ backgroundColor: #0a0a0a, justifyContent: center, alignItems: center, fontFamily: Helvetica, Arial, sans-serif, }} div style{{ fontSize: 160, fontWeight: 800, color: #ffffff, opacity, letterSpacing: 0.05em, }} HELLO /div /AbsoluteFill ); };它包含了两条 Remotion 最核心的 APIuseCurrentFrame()逐帧驱动的唯一数据源组件在每一帧重新求值interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0])四段输入的多段线性插值即 0–15 帧淡入到 1、15–75 帧保持、75–90 帧淡出到 0并显式 clamp 两端外推。合成注册 Root.tsximport { Composition } from remotion; import { TitleCard } from ./TitleCard; export const RemotionRoot () ( Composition idTitleCard component{TitleCard} durationInFrames{90} fps{30} width{1280} height{720} / );合成元数据是翻译时必须继承的契约durationInFrames{90}、fps{30}、1280×720即总时长 90 帧 / 30 fps 3 秒。入口 index.ts 只做registerRoot(RemotionRoot)没有任何额外逻辑。渲染配置 remotion.config.tsimport { Config } from remotion/cli/config; // Match HyperFrames default render so SSIM diffs measure translation // fidelity, not encoder differences. Config.setVideoImageFormat(png); Config.setColorSpace(bt709); Config.setOverwriteOutput(true); Config.setConcurrency(1);这份配置是全套 SSIM 评估成立的前提其原理将在评估一节展开PNG 输出规避了 JPEG 的有限范围/全范围色彩标志差异yuvj420p vs yuv420p否则会白白损失约 0.05 个 SSIMbt709对齐 HF 的 BT.709 SDR 输出串行渲染保证可复现。翻译核心帧驱动 → 秒驱动的 paused GSAP timeline换算规则time frame / fpstiming.md 明确指出这是单一最高杠杆的参考HF 的 timeline 以秒为单位Remotion 以帧为单位换算必须且只需做一次在翻译时而不是运行时time_seconds frame / fps于是 30 fps 下[0, 15, 75, 90]帧映射为[0, 0.5, 2.5, 3.0]秒帧 0 → 0.0 s淡入起点帧 15 → 0.5 s淡入结束 / 保持起点帧 75 → 2.5 s保持结束 / 淡出起点帧 90 → 3.0 s淡出结束 / 合成结束多段 interpolate 的一对一映射T1 的 HF 侧完整实现位于 hf-src/index.html。其结构完全遵循技能约定的四步生成规范见 SKILL.md Step 3根div idstage携带data-composition-id、data-start0、data-duration3、data-fps30、data-width1280、data-height720扁平的场景 div 列表带data-start/data-duration/data-track-index内联style负责布局并把每个被动画属性的from态写进 CSS此处.title { opacity: 0 }底部单个script标签内含一条 pausedgsap.timeline({ paused: true })最后注册window.__timelines[composition-id] tl;交给 HF 运行时。div idstage ># 1. 渲染 Remotion 基线 cd remotion-src npm install npm run render # 渲染结果输出到 remotion-src/out/baseline.mp4 #package.json 中 render 脚本为remotion render TitleCard out/baseline.mp4 # 2. 渲染 HyperFrames 翻译 cd ../hf-src npx hyperframes render --output ../hf.mp4 # 3. 用评估脚本对比从技能 scripts/ 目录执行 ../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff评估脚本的判定逻辑 render_diff.sh该脚本是整套技能最底层的评估原语给定两段视频逐帧计算 SSIM报告是否通过。其行为要点用法render_diff.sh baseline.mp4 translated.mp4 [output-dir]输出ssim.logffmpeg 逐帧行与summary.jsonmean / min / p05 / p95 / frame_count / pass / threshold通过ffmpeg -lavfi ...ssimstats_file...收集逐帧All:分数再用内嵌 python3 解析并计算分布统计量默认阈值 0.85宽松tier 专属阈值由编排脚本通过环境变量R2HF_SSIM_THRESHOLD覆盖T1 即 0.95退出码0 通过、1 失败、2 用法/环境错误缺少 ffmpeg、输入文件不存在等。expected.json 记录了本夹具的标定数据SSIM 阈值 0.952026-04-27 以 remotion4.0PNG 输出、BT.709对比 hyperframes0.4.15-alpha.1 测得的平均 SSIM 为 0.974p05 为 0.972p95 为 0.983。为什么阈值是 0.95以及两个已知的噪声来源expected.json的rationale解释了阈值设计0.95 位于实测 p050.972下方约 0.02——真实的翻译回归错误缓动、错误时长会让平均 SSIM 掉 0.05 以上而 CI 间的编码器/字体漂移被约束在约 0.01两者之间留有清晰的判别带。同时translation_notes明确记录了两个非翻译本身的噪声源理解它们才能正确解读分数字体回退差异双方都未加载字体、走系统 Helvetica/Arial 回退但 Linux 上 Remotion 内置 Chromium 与 HF 的 chrome-headless-shell 回退结果不同——同样的fontWeight: 800在 HF 侧渲染得明显更粗约损失 0.025 平均 SSIM是全套测试中占比最大的非翻译噪声底。像素格式不匹配Remotion 默认 JPEG 输出写的是 yuvj420p全范围而 HF 是 yuv420p有限范围直接比较约损失 0.05 个 SSIM。这正是remotion.config.ts必须显式设置setVideoImageFormat(png)setColorSpace(bt709)的原因——评估测的是翻译保真度而不是编码器差异。从 T1 到整个语料库如何把这条链路复用到你自己的迁移T1 的意义在于它是整条评估链路的最小冒烟测试。它的完整渲染与评估也可以由语料库编排脚本一键执行见 SKILL.md How to grade your own translation./assets/test-corpus/run.sh该脚本依次运行 T1/T2/T3 的渲染 差异对比与 T4 的 lint 校验输出逐 tier 的通过/失败表格并汇总 JSON 报告适合在干净检出上做端到端回归验证。将这条流程迁移到你自己的 Remotion 项目时只需把 T1 的套路按同样顺序走一遍Lint 源运行 scripts/lint_source.py识别 blockeruseState/useReducer、非空依赖的useEffect、异步calculateMetadata、第三方 React UI 库——命中即停止并转互操作方案、warningremotion/lambda配置、delayRender、useCallback/useMemo、自定义 hook——丢弃该构造继续翻译并记录在TRANSLATION_NOTES.md与 infostaticFile、interpolateColors规划映射依据 api-map.md 按源码用到的 API 加载对应主题参考Composition/defaultProps看 parameters.mdSequence/Series/AbsoluteFill看 sequencing.mduseCurrentFrame/interpolate/spring看 timing.md音频视频看 media.md转场看 transitions.md生成 HF 合成按 T1 的index.html结构产出stage 根 div 场景 div 内联样式 单条 paused timeline window.__timelines注册验证渲染双基线并跑render_diff.sh失败时用 frame_strip.sh 抽出逐帧对比定位是哪些帧偏离再回头核对对应的 timing/sequencing/media 参考记录差距把未干净翻译的内容被丢弃的响度曲线、被近似的自定义展示、被替换的字体写进TRANSLATION_NOTES.md格式见 limitations.md。小结tier-1-title-card用 90 帧、一个HELLO、三条 GSAP tween 划定了 Remotion→HyperFrames 翻译的及格线time frame / fps的换算、ease: none对线性插值的精确匹配、CSS 承担from态、paused timeline 承担全部动画求值、以及 PNG/BT.709 下的 SSIM 0.95 门槛实测 0.974。这套夹具同时给出了可复现的评估方法双基线渲染 render_diff.sh逐帧 SSIM expected.json标定数据让迁移是否保真从主观目测变成可量化的阈值判定。理解并跑通 T1就等于掌握了该技能评估链路的全部基础构件可以直接将其复用于任意一个 Remotion 合成的迁移验证。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
