HyperFrames 组合构图模式实战画中画、文字穿人、标题卡片与幻灯片式合成【免费下载链接】OpenMontageWorlds 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-startintro 2data-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 FramePiP 的目标是把一段视频作为前景小窗叠加在底层画面上并可随时间移动/缩放/圆角化。核心手法只有一句话动画一个包装 div 的位置与尺寸让视频充满该 div。div idpip-frame styleposition:absolute;top:0;left:0;width:1920px;height:1080px;z-index:50;overflow:hidden; video idel-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在t10处把窗口从全屏收进右下小窗随后t30处又将其横向位移到左缘——即先缩小再横移完全由时间线编排不依赖任何 DOM 状态查询。模式二文字穿人透明 WebM 叠层这是主讲人/主持人场景的标志性效果把大标题放在人物身后让人物的剪影遮挡文字产生标题从人后穿过的纵深感。前提是先用 HyperFrames 的抠像命令把人物从视频里抠成带 alpha 通道的透明 WebMnpx hyperframes remove-background presenter.mp4 -o presenter.webm成片需要三个图层外加一条决定成败的规则!-- z1 base — 全不透明 mp4场景 人物始终可见 -- video idcf-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;逐层拆解z1 的cf-base是完整不透明底画z2 的#cf-headline用clip-path: inset(0 0 100% 0)把文字完全裁在可视区之外由 timeline 在0.25s处以expo.out缓动从下向上擦开z3 的cf-cutout播放抠好的透明 WebM初始opacity:0在t3.3CUT 切换点被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-start0目的是让两段视频从 t0 起同步解码。若让 cutout 延迟挂载例如data-start3.3Chrome 会在挂载瞬间做一次 seek 解码器预热很可能让 cutout 帧与底层 mp4 错开一帧在切换点表现为肉眼可见的单帧抖动。两条视频同时从 0 开始解码切层时就无需 seek帧完全对齐。这也是为什么 cutout 层虽然画面被文字短暂遮挡仍要从头常驻。抠像质量与颜色匹配remove-background默认--quality balanced对应 crf 18把 cutout 的 RGB 保持得与源 mp4 几乎一致——叠层时边缘光晕与色偏最小。参数选择建议hero 特写镜头用--quality bestcrf 12追求最小色彩误差只有当 cutout 覆盖在不同的背景之上、且对文件体积敏感时才降级到--quality fastcrf 30。哨兵补间sentinel的作用tl.set({}, {}, 6)是一条空补间把 timeline 的可见长度延伸到整个合成时长本例 6s。原因渲染器依据时间线的最末有效补间判断是否需要继续输出帧若最后一个有意义的动作发生在3.3scutout 点亮而没有显式铺满到 6s渲染可能提前收尾。这个细节在模式四与模式五同样适用——凡是动画动作结束早于合成data-duration的场景都应补一条哨兵补间。与之互补的是子合成的时长填充机制slot 内 timeline 提前结束后槽位会保持末帧见 sub-compositions.md。模式三淡入淡出标题卡片成片开场最通用的片头字卡一段深色底卡片带标题淡入停留片刻后整卡淡出。卡片本身是带时序的 clip挂在较高的data-track-index避免与底层底画轨道冲突标题文字初始opacity:0再由补间点亮div idtitle-card >tl.to(#title-card h1, { opacity: 1, duration: 0.6 }, 0.3); tl.to(#title-card, { opacity: 0, duration: 0.5 }, 4);时间轴语义t0.3标题文字opacity 0→10.6st4整张卡片opacity 1→00.5s在 5s 处恰好结束。注意这里淡出的对象#title-card是带data-start/data-duration的 clip 元素本身与模式二刻意回避在 video 上直接控制 opacity 的情况不同——因为片尾整卡淡出本来就是要让框架认为该元素被移出舞台而文字标题h1不带时序属性由 GSAP 自由驱动即可。分层的边界判断标准始终是被框架管理生命周期的元素 vs 由你全权托管的装饰内容。模式四带章节页眉的幻灯片式连续合成当一段成片由多个连续章节组成时最稳妥的写法不是动态创建/销毁 DOM而是在同一轨道上声明多个各自独立时间窗口的元素让框架基于data-start/data-duration自动挂载与卸载div classslide>div idcomp-1 contenteditable="false">【免费下载链接】OpenMontageWorlds 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），仅供参考