Motion HyperFrames: Bau-Modul
在 motion-director(流程、风格、批评)和HeyGen官方HyperFrames技能(技术)之间搭建桥梁。流程来自motion-director。 HyperFrames工作流(/hyperframes、产品发布视频、运动图形……)带有自己的简报循环,这些循环被Director流程所取代。它们的技术规则完全适用。
设置(每个项目)
claude plugin marketplace add heygen-com/hyperframes # 官方技能(一次性)
claude plugin install hyperframes@hyperframes # 或者不使用插件:npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # 锁定版本,项目中途切勿使用 @latest
何时阅读哪个HyperFrames技能
| 任务 | 技能 |
|---|---|
合成契约:data-*、剪辑、轨道、子合成、确定性 | hyperframes-core(在第一个HTML之前) |
运动、GSAP、过渡;Three.js(adapters/three.md);运动模糊 | hyperframes-animation |
| 摄像机、缩放、推近、匹配/甩镜、遮罩、SVG绘制 | hyperframes-keyframes |
| 命令、渲染选项、故障排除 | hyperframes-cli |
| 查找构件 | hyperframes-registry |
音频不在HyperFrames中构建:混音来自 motion-sound,在最后添加。
优先使用自己的组件
每部影片都有自定义设计,自行构建构件(hf/components/<name>.html)。目录(npx hyperframes catalog --query "<动作,英文>")是宝库:阅读源代码,理解技术,转化为自己的设计。切勿1:1照搬目录样式,那正是每个AI视频都有的样子。
检查
npx hyperframes lint # 快速检查,每个主要步骤之后
npx hyperframes check # 运行时、布局/溢出、对比度(WCAG)
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # 单帧;不带 --describe false 会调用付费图像模型
npx hyperframes render --quality draft --output ../renders/draft.mp4 # 动态分镜,快速
之后执行来自 motion-director/references/rules.md 的检查。
渲染 + 母版制作(防条带)
普通MP4=8位:渐变和辉光会出现色阶。因此,应无损渲染并使用10位加细颗粒进行母版制作:
npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav
该脚本校正色彩矩阵(BT.601无标签→BT.709),在亮度上添加精细的10位颗粒,放置音频,并在图像透明时发出警告。注意:10位H.264 QuickTime无法播放(VLC、mpv、ffplay、浏览器均可)。如需发送,额外制作一份8位副本(-pix_fmt yuv420p -crf 18)。
内存
包含3D、玻璃或大图层的渲染需要大量RAM。因此:一次只渲染一个,不要有后台渲染循环,先渲染单个帧并观察内存,任何图层的单边尺寸不得超过4096像素。
运动模糊
| 方式 | 使用时机 | 限制 |
|---|---|---|
Registry构件 motion-blur(中间时间、快门角度) | 快速单个元素 | 仅 transform;在大容器上代价高昂 |
| 引擎运动模糊 | 整个画面 | 仅通过Producer API,不能与着色器过渡一起使用 |
切勿用于阅读轨迹(文本/页面),仅用于眼睛不需要阅读的地方。
陷阱(实测或来自Issues,截至2026年10月)
- 背景放在
<body>而非根元素[data-composition-id]上:MOV中透明,MP4中黑色。 z-index: -1不渲染。在运行时加载之前由脚本创建的动画可能会错位一帧;Shadow Root/Pseudo元素中的CSS动画同样如此。- 静默回退到慢速截图录制:请阅读渲染摘要。
Math.random/Date.now会被lint阻止:随机数始终使用种子。禁止无限循环repeat。- 大型CSS模糊会严重拖慢速度。重建后的资产应以新文件名存放(按路径缓存)。