HyperFrames 组合构图模式实战：画中画、文字穿人、标题卡片与幻灯片式合成-育师

HyperFrames 组合构图模式实战：画中画、文字穿人、标题卡片与幻灯片式合成

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

导读

本文是 HyperFrames 创作体系（本仓库 hyperframes 技能族的顶层入口）中一份面向具体成片构图的操作级参考，核心聚焦五大高频组合模式：画中画（PiP）、文字穿人（Text Behind Subject，透明 WebM 叠层）、淡入淡出标题卡片、带章节页眉的幻灯片式连续场景，以及把前四者统一起来的**顶层合成（Top-Level Composition）**写法。阅读并跟随本文示例后，你将掌握 HyperFrames 以 HTML 声明视频的data-*时序契约、clip/track/z-index 图层心智模型、透明叠层的生命周期细节，以及子合成自动嵌套的接线规则，能独立搭建一段可被hyperframesCLI 直接渲染的完整成片。

背景：Composition 的核心契约

在深入五种模式前，先建立两条贯穿全文的规则。完整的契约定义见 composition-patterns.md（创作方向侧）与>window.__timelines = window.__timelines || {}; const tl = gsap.timeline({ paused: true }); // ……构建补间…… window.__timelines["<composition-id>"] = tl;

window.__timelines的 key 必须与根元素的data-composition-id精确一致，否则渲染期会因找不到 timeline 而等待超时（详见 sub-compositions.md 的 Pitfall 2）。最小可渲染骨架可参考 minimal-composition.md。

其二，时间与视觉是两套坐标系。这是 tracks-and-clips.md 反复强调的要点：

data-track-index控制的是时间重叠（同一轨道上两个 clip 不得时间重叠，hyperframes lint会直接报错）；
视觉前后关系（z 轴）由 CSSz-index控制，与轨道号无关——轨道 5 的 clip 并不"高于"轨道 1 的 clip。

所有构图模式本质上都在编排"clip 的时间窗口"与"CSS 的视觉层级"这两件事。通用的data-*参数速查：

属性	语义
`data-start`	开始时间（秒），或引用另一 clip id 的相对时间（如`data-start="intro + 2"`）
`data-duration`	持续秒数；`<div>`/`<img>`/子合成必须显式声明，视频/音频可默认取媒体时长
`data-track-index`	时间轨道号，同轨 clip 不得重叠
`data-media-start`	相对源媒体的起播偏移（不裁剪文件本身）
`data-composition-id`	合成唯一 ID，必须与`window.__timelines`注册 key 一致
`data-width`/`data-height`	画幅像素，常见`1920x1080`、`1080x1920`、`1080x1080`

其中data-duration的可见窗口两端都含：clip 在start ≤ t ≤ start + duration内可见，最后一帧仍保留动画的终态，因此入场动画即使恰好落在data-duration上也会在末帧正确显示。

模式一：画中画（Video in a Frame）

PiP 的目标是把一段视频作为前景小窗，叠加在底层画面上，并可随时间移动/缩放/圆角化。核心手法只有一句话：动画一个包装 div 的位置与尺寸，让视频充满该 div。

<div id="pip-frame" style="position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:50;overflow:hidden;" > <video id="el-video" >tl.to( "#pip-frame", { top: 700, left: 1360, width: 500, height: 280, borderRadius: 16, duration: 1 }, 10, ); tl.to("#pip-frame", { left: 40, duration: 0.6 }, 30);

本模式有两个关键约束，背后都有框架行为支撑：

wrapper（#pip-frame）上绝不能带任何data-*属性。因为它是被 GSAP 直接驱动位置/尺寸的"容器"，而视频#el-video才是 clip。wrapper 不带data-start/data-duration，意味着它的可见性完全由你的样式与 timeline 决定，不受框架的 clip 生命周期管理约束（框架会对"激活中"的带时序元素强制opacity: 1，这点在模式二会详细展开）。
视频用绝对定位充满 wrapper，而不是跟随布局流。wrapper 设overflow:hidden把圆角之外的视频裁掉，于是borderRadius动画会得到圆角小窗效果。底层底画可以是另一个完整画幅的 clip，靠z-index:50压在它上方。

上述两条 GSAP 补间分别代表 PiP 最常见两种调度：duration:1在t=10处把窗口从全屏收进右下小窗；随后t=30处又将其横向位移到左缘——即"先缩小再横移"，完全由时间线编排，不依赖任何 DOM 状态查询。

模式二：文字穿人（透明 WebM 叠层）

这是主讲人/主持人场景的标志性效果：把大标题放在人物身后，让人物的剪影遮挡文字，产生"标题从人后穿过"的纵深感。前提是先用 HyperFrames 的抠像命令把人物从视频里抠成带 alpha 通道的透明 WebM：

npx hyperframes remove-background presenter.mp4 -o presenter.webm

成片需要三个图层，外加一条决定成败的规则：

<!-- z=1 base — 全不透明 mp4（场景 + 人物），始终可见 --> <video id="cf-base" >const tl = gsap.timeline({ paused: true }); const CUT = 3.3; // 先揭幕标题 tl.to("#cf-headline", { clipPath: "inset(0 0 0% 0)", duration: 0.6, ease: "expo.out" }, 0.25); // 到切换点瞬间点亮 cutout 包装层 —— 人物剪影“刺穿”标题 tl.set(".cutout-wrap", { opacity: 1 }, CUT); // 哨兵补间：把时间线延长到合成全长，避免渲染器在最后一个有效补间处提前收工 tl.set({}, {}, 6); window.__timelines["cover-flip"] = tl;

逐层拆解：z=1 的cf-base是完整不透明底画；z=2 的#cf-headline用clip-path: inset(0 0 100% 0)把文字完全裁在可视区之外，由 timeline 在0.25s处以expo.out缓动从下向上"擦"开；z=3 的cf-cutout播放抠好的透明 WebM，初始opacity:0，在t=3.3（CUT 切换点）被tl.set一次性点亮——此时人物剪影叠在文字之上，形成文字从人物身后穿过的错觉。

为什么 opacity 必须加在 wrapper div 上，而不是 video 本身？

文档给出了明确的框架层理由：框架对任何带data-start/data-duration的"激活中"元素会强制opacity: 1——这是它管理 clip 生命周期（挂载/卸载/显隐）的方式。你若在 video 元素上写 CSSopacity: 0，会被框架静默覆盖。因此把 video 包进一个不带任何data-*属性的 wrapper div，让 wrapper 的显隐完全交给你的 CSS 与 GSAP 控制。这是本模式"包装层拥有 opacity"规则的出处。

为什么两段视频都要`data-start="0"`？

目的是让两段视频从 t=0 起同步解码。若让 cutout 延迟挂载（例如data-start="3.3"），Chrome 会在挂载瞬间做一次 seek + 解码器预热，很可能让 cutout 帧与底层 mp4 错开一帧，在切换点表现为肉眼可见的单帧抖动。两条视频同时从 0 开始解码，切层时就无需 seek，帧完全对齐。这也是为什么 cutout 层虽然画面被文字短暂遮挡，仍要从头常驻。

抠像质量与颜色匹配

remove-background默认--quality balanced（对应 crf 18），把 cutout 的 RGB 保持得与源 mp4 几乎一致——叠层时边缘光晕与色偏最小。参数选择建议：

hero 特写镜头用--quality best（crf 12），追求最小色彩误差；
只有当 cutout 覆盖在不同的背景之上、且对文件体积敏感时才降级到--quality fast（crf 30）。

哨兵补间（sentinel）的作用

tl.set({}, {}, 6)是一条"空"补间，把 timeline 的可见长度延伸到整个合成时长（本例 6s）。原因：渲染器依据时间线的最末有效补间判断是否需要继续输出帧，若最后一个有意义的动作发生在3.3s（cutout 点亮），而没有显式铺满到 6s，渲染可能提前收尾。这个细节在模式四与模式五同样适用——凡是动画动作结束早于合成data-duration的场景，都应补一条哨兵补间。与之互补的是子合成的"时长填充"机制（slot 内 timeline 提前结束后，槽位会保持末帧，见 sub-compositions.md）。

模式三：淡入淡出标题卡片

成片开场最通用的"片头字卡"：一段深色底卡片带标题淡入，停留片刻后整卡淡出。卡片本身是带时序的 clip（挂在较高的data-track-index，避免与底层底画轨道冲突），标题文字初始opacity:0再由补间点亮：

<div id="title-card" >tl.to("#title-card h1", { opacity: 1, duration: 0.6 }, 0.3); tl.to("#title-card", { opacity: 0, duration: 0.5 }, 4);

时间轴语义：t=0.3标题文字opacity 0→1（0.6s），t=4整张卡片opacity 1→0（0.5s），在 5s 处恰好结束。注意这里淡出的对象#title-card是带data-start/data-duration的 clip 元素本身，与模式二刻意回避在 video 上直接控制 opacity 的情况不同——因为片尾"整卡淡出"本来就是要让框架认为该元素被移出舞台，而文字标题h1不带时序属性，由 GSAP 自由驱动即可。分层的边界判断标准始终是：被框架管理生命周期的元素 vs 由你全权托管的装饰内容。

模式四：带章节页眉的幻灯片式连续合成

当一段成片由多个连续章节组成时，最稳妥的写法不是动态创建/销毁 DOM，而是在同一轨道上声明多个各自独立时间窗口的元素，让框架基于data-start/data-duration自动挂载与卸载：

<div class="slide"><div id="comp-1" contenteditable="false">【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

HyperFrames 组合构图模式实战：画中画、文字穿人、标题卡片与幻灯片式合成