企业官网建设流程全解析

HyperFrames 帧内接缝剪辑手册：用 Zoom-Through、Cut-the-Curve 与 Waterfall Cut 打造连续镜头

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

本文是 HyperFrames PR-to-video 工作流中帧工人（frame worker）使用的"帧内接缝剪辑目录"（cut catalog）实战指南。它解决的是单个帧内部的连续性难题：当一帧的镜头序列（shot sequence）内部出现文本/元素替换、Scene 到 Scene 的切换、或一行文本到另一行文本的换行时，如何让画面读起来像"一架摄像机连续穿过内容"，而不是一次生硬的幻灯片切换。读完本文，你将掌握四种速度匹配剪辑技术（Zoom-Through、Inverse Zoom-Through、Cut-the-Curve、Waterfall Cut）的完整参数配方、模糊逻辑（Blur Logic）、选择决策表与反模式清单，并能直接在 HyperFrames 的暂停式 GSAP 时间线上落地实现。

定位：这是"帧内"的接缝，不是"帧间"的转场

在 PR-to-video 工作流 中，Step 5 由帧工人把每个故事板帧构建为独立的 HTML 合成（composition）。帧与帧之间的切换由故事板字段transition_in声明，由装配器（harness）的注入器从另一个独立的注册表词汇表中盖章生成——该注册表（见 scripts/lib/transitions.json）只包含crossfade/blur-crossfade/push-slide/zoom-through/squeeze五种整帧包装转场。

而本文档讨论的四种接缝——cut-the-curve、inverse-zoom、waterfall——不是合法的transition_in取值。它们是帧工人在自己合成的内部（帧自己的暂停 GSAP 时间线上）构建的：Z 轴缩放 + 模糊 + 透明度补间，或逐词 X 轴错峰，全部作用于该帧自身的元素。

一个关键的术语澄清：这里的"Scene"是一帧内部的时间窗口，不是帧与帧之间的边界。当一帧的镜头序列内部出现以下情况时，就应该使用本目录：

• 场景内文本/元素替换（within-scene swap）；
• Scene 到 Scene 的切换；
• 一行文本到另一行文本的换行。

唯一"两头都在"的是zoom-through：在注册表里它是整帧包装转场，在本目录里它是元素级 Z 轴剪辑——同一个概念，不同的作用域。

从源码结构看，motion-language.md 的"Seam cuts (worker-built, inside a frame)"一节明确把这些接缝归为"帧工人在一帧自己的 Scene 之间创作的、速度匹配的剪辑"，并规定接缝的配方在本目录而非单个../hyperframes-animation/rules/规则 ID 中。这与 sub-agents/frame-worker.md 中"帧工人只读自己的数据包与frame.md，绝不打开完整故事板"的约束一致——本目录就是工人构建接缝时的唯一权威配方。

四种技术的共同原理：在峰值速度处剪辑

四种技术共享同一条底层原则：

在峰值速度处剪辑，让剪辑两侧的方向与速度匹配。

它们的差异只在于轴（axis）、作用域（scope）与颗粒度（granularity）：

如何在一处接缝上做选择：对于未完成的短语（在一个更大想法上逐步推进，跨越多个视觉上不同但朝向同一焦点的场景——多行文本、连续卡片序列），使用cut-the-curve/waterfall。对于状态变更（转向视频的新部分——最常见的是 hook → context，或两个不同章节之间），使用zoom-through；inverse zoom-through用于抵达/收尾重音。把这些接缝串联起来，让帧内部的接缝读起来像一架摄像机穿行于内容之中。

模糊逻辑（适用于所有 Z 轴变体）

模糊是"卖出剪辑速度"的关键，但它的量值必须随主体尺寸缩放：

两条硬性规则：

1. 剪辑两侧使用相同的峰值模糊——在交换帧处，值必须完全匹配。
2. 模糊应用到包装层（wrapper），绝不应用到单个子元素。

为什么模糊必须匹配且作用于包装层

从实现角度，模糊通过 CSSfilter: blur()作用于整块元素。若两侧峰值不一致（例如出去的是 10px、进来的是 6px），在硬剪辑帧处会产生可见的清晰度跳变，破坏"同一团连续运动"的幻觉。而作用于包装层（而非逐个词/子元素）能避免一个致命陷阱：如果给每个子元素单独加模糊，子元素之间的缝隙会暴露，且在多个滤镜叠加时产生非预期的边缘合并。这与 HyperFrames 转场注册表中blur-crossfade的做法（transitions.json）一致——它同样在整帧#root上应用统一的blur(10px)，用模糊掩盖背景色冲突。

一、Zoom-Through（向前）

要解决的问题

文本进入、停留、退出，然后下一条文本进入、停留、退出。每条文本块彼此独立——没有深度、没有连续性。视频看起来像幻灯片。

原理

一条在 Z 轴上速度匹配的剪辑。你永远不会同时看到两段文本。出去的文本向观众方向加速缩放，模糊与透明度在剪辑点达到峰值并掩盖一次硬交换，进来的文本从后方继续放大（减速进入焦平面）。一次连续的向前运动，两段不同的文本。

三阶段配方

阶段 1：退出——文本向前加速（朝向观众）

• Scale：1.0 -> 1.2，Blur：0px -> 10px（文本尺度；见模糊逻辑），Opacity：1.0 -> 0.15
• Scale/Blur 缓动：power3.in（陡峭加速）
• Opacity 缓动：none（线性——均匀变暗，与缩放分离）
• 时长：0.2s

阶段 2：硬剪辑——在峰值速度 + 峰值模糊处

• 出去的文本：opacity: 0（通过tl.set瞬时设置）
• 进来的文本：opacity: 0.15, scale: 0.75, blur: 10px（通过tl.set瞬时设置）
• 所有属性在剪辑处匹配：模糊、透明度，以及缩放方向（两侧都在放大）

阶段 3：进入——文本继续向前（放大进入焦平面）

• Scale：0.75 -> 1.0，Blur：10px -> 0px，Opacity：0.15 -> 1.0
• 缓动：expo.out（陡峭的初始爆发以匹配退出速度，长尾收敛）
• 时长：0.5s

为什么退出时透明度必须分离

Scale 使用power3.in，但这会让透明度在补间的大部分时间里保持在接近 1.0。把透明度拆成独立补间并使用线性缓动，能让变暗过程均匀。进入时，所有属性可以共享expo.out。

从工程角度，这对应了 gsap-easing-and-stagger.md 中".in用于退出、.out用于进入"的总体规则，以及"不同语义使用不同缓动"的实践——缩放负责物理动量，透明度负责可读性，两者分离使剪辑帧处的数值可以精确对齐。

二、Inverse Zoom-Through（向后）

正序变体的镜像：摄像机"向后拉"而不是"向前推"。出去的元素向远离观众的方向后退；进来的元素以超大尺寸到达（仿佛刚刚就在摄像机后方），然后缩回焦平面。两侧都沿收缩方向运动——同向规则保持，只是方向反转。

何时使用（相对正序变体）：抵达重音。进来的元素从大于画幅的尺寸落地，因此带着存在感——适合收尾台词（如"That changes today."）、巨型回复，或一个定格的终态。正向 zoom-through 读作"穿行于内容之中"；反向读作"抵达内容"。

三阶段配方

阶段 1：退出——元素后退（远离观众）

• Scale：1.0 -> 0.8，Blur：0px -> 10px（文本尺度）
• Scale/Blur 缓动：power3.in；Opacity：1.0 -> 0.15使用none（独立补间）
• 时长：0.2s

阶段 2：硬剪辑

• 出去的文本：opacity: 0（通过tl.set）
• 进来的文本：opacity: 0.15, scale: 1.25, blur: 10px（通过tl.set）

阶段 3：进入——进来的元素缩回原位

• Scale：1.25 -> 1.0，Blur：10px -> 0px，Opacity：0.15 -> 1.0
• 缓动：expo.out，时长：0.5s

为什么tl.set是必需而非可选项

这两个 Z 轴变体在阶段 2 反复强调"通过tl.set瞬时设置"——这与 HyperFrames 的 seek-safe 核心直接相关（见 motion-language.md Part 3）：每一帧都是暂停的 GSAP 时间线被逐帧 seek，任何依赖 CSS 隐藏初始态的元素都会在补间"接管"之前以可见状态渲染出来，并在 seek 时闪烁。因此：

• 进入必须使用fromTo，显式声明 from 状态，保证 seek 到 t=0 时元素处于正确位置；
• 硬剪辑瞬间的状态切换必须用tl.set（等价于零时长补间），它随时间线被 seek，可逆且确定。

三、Cut the Curve（Scene 过渡）

原理

对所有 x/y 轴上的 Scene 到 Scene 过渡使用 cut-the-curve。出去的 Scene 的英雄元素朝一个方向加速，剪辑在运动中段落地，进来的 Scene 的英雄元素沿同一方向继续运动并减速。没有任何元素完全移出画幅，也没有任何元素从画幅外完全进入——速度加透明度渐隐欺骗了眼睛，部分位移就足够了。

同路径、同方向

如果 Scene A 的英雄元素向左滑出，Scene B 的英雄元素从右侧进入并继续向左滑动。两者都向左运动——一次连续的运动。

通过镜像缓动匹配速度

最干净的匹配方式：退出用power4.in，进入用power4.out，相同的距离与时长——数学上它们正好是同一个power4.inOut复合曲线的两半，因此进入的元素在虚拟路径的 50% 点处以完全相同的速度接续（例如 230px / 0.3s ≈ 剪辑两侧各约 3,070 px/s）。

关于"x: +230"这样的偏移值：文档以 230px 作为基准示例，它对应约 0.3–0.34s 的运动时长。实际使用时，关键不是这个具体数字，而是两侧距离与时长完全相等，从而使镜像缓动在交换点处产生一致的瞬时速度。

渐隐技巧：退出的透明度在位移约 25–30% 处完成（渐隐时长约 0.18–0.3s，而运动时长 0.3–0.34s）——元素在仍然明显加速时就消失了，因此没有任何元素需要到达画幅边缘。进入则在其减速过程中从约 0.35 的透明度快速淡入。让最后一个渐隐元素恰好在硬剪辑处消亡——出现"没有任何东西在移动"的空窗期会读作尴尬的死寂。

规则

• 所有 Scene 过渡都使用 cut-the-curve——它是默认项，不是点缀；
• 两侧同方向；镜像的.in/.out缓动，相同距离 + 时长；
• 退出时长要短（0.2–0.4s），进入时长 ≥ 退出时长；
• 部分位移 + 渐隐，绝不做完全移出画幅的运动。

与帧间转场的分工（为什么不会混淆）

从代码结构看，帧间转场由 transitions.mjs 注入器 在window.__timelines["main"]上盖章 GSAP 模板（push-slide的模板也是power3.inOut+ 水平/垂直位移对），它作用于两个帧的#el-<id>包装层；而本目录的 cut-the-curve 作用于一帧内部的 Scene 元素。两者共用"同方向、匹配速度"的物理直觉，但作用域互不相交——这也是 motion-language.md 强调"帧间转场不是你的，故事用transition_in声明"的原因。

四、Waterfall Cut（逐词版 cut-the-curve）

把 cut-the-curve 做到词的颗粒度——向左剪辑对文本到文本接缝的最强版本。出去的每一行中，每个词沿着自己明显的曲线 ramp 出去；进来的每一行中，每个词在运动中途级联进来。错峰把剪辑变成一波"眼睛沿着接缝骑乘"的浪。

退出（逐词）

• 运动：x: 0 -> -230，时长 0.34s，缓动power4.in——比通常的 power2 明显更陡的 ramp：词先是几乎不动的爬行，然后"撕开"加速；
• 渐隐：opacity -> 0，时长 0.18s（独立补间，power1.in）——在词只走了约 25–30% 位移时就完成；
• 错峰：按阅读顺序，每词约 0.022s，让最后一个词恰好在硬剪辑处完成渐隐。

进入（逐词）

• fromTo x: +230 -> 0, opacity: 0.35 -> 1，时长 0.3s，缓动power4.out——复合曲线的镜像后半段；每个词点燃时就已经带着匹配的速度在运动；
• 瀑布错峰使用收缩的间隔（起点 0.05s，每词乘以约 0.84）——让级联沿整行加速；级联应该逐词加速，而不是以固定的每词延迟匀速推进；
• 构建时把所有词预设为x: +230, opacity: 0——仅靠immediateRender: false会让尚未启动的词在错峰窗口期间以静止状态可见地留在原位。

整行变体

单行重音（例如一条大的开场白）作为一个整体组退出，使用同样的明显 ramp，但把渐隐拉伸到约 0.3s，并在剪辑前约 0.02s 结束——一个过早渐隐的孤立元素会留下空窗，而词的级联本来可以覆盖它。

Waterfall Cut 与 Waterfall Entry 的区别（易混淆点）

仓库中另有一条名为waterfall-entry的规则（rules/waterfall-entry.md），它明确声明自己是"场景内到达，不是接缝"，并把两者的差异写成表格：

同名的两套规则服务于完全不同的目的：到达（entry）用二元切换保证"啪"地落定，接缝（cut）用渐隐保证速度连续。混用它们的规则是反模式。

选择变体：速查表

反模式清单

在 HyperFrames 中落地：实现要点与代码骨架

把以上配方翻译成可运行的 HyperFrames 合成时，有几个必须遵守的工程约束（与 motion-language.md Part 3 的 seek-safe 核心一致）：

1. 所有运动都在暂停的 GSAP 时间线上驱动：合成根元素携带data-composition-id/data-start/data-duration，时间线以gsap.timeline({ paused: true })创建并注册到window.__timelines[<frame_id>]（见 transitions/catalog.md 的场景模板）。严禁 CSStransition/@keyframes——它们运行在浏览器时钟上，与 HF 的 seek 时钟脱同步并闪烁。
2. 硬剪辑用tl.set，进入用fromTo：phase 2 的状态交换（outgoingopacity: 0、incoming 预置）必须是tl.set；所有进入补间必须fromTo显式声明 from 状态，保证任意 seek 位置渲染一致。
3. 确定性：没有Math.random、没有Date.now、没有repeat/yoyo。Waterfall 的错峰间隔（0.05s × 0.84 收缩）由元素索引推导，而非随机。
4. 渐变镜像的数值一致性：把退出与进入写成一个"虚拟power4.inOut"的两半——相同的位移距离（如 ±230px）、相同的时长（如 0.3s），退出用power4.in、进入用power4.out，这样在交换点处的瞬时速度由数学保证一致，而不是靠眼睛调。

一个最小化的 zoom-through 时间线骨架（单帧内，两段文本交换）：

<script> window.__timelines = window.__timelines || {}; var tl = gsap.timeline({ paused: true }); var CUT = 0.2; // 阶段 1 时长 = 硬剪辑时刻 // Phase 1: Exit —— scale/blur 共享 power3.in，opacity 独立线性 tl.to("#outgoing", { scale: 1.2, filter: "blur(10px)", duration: 0.2, ease: "power3.in" }, 0); tl.to("#outgoing", { opacity: 0.15, duration: 0.2, ease: "none" }, 0); // Phase 2: Hard cut —— 同一时刻，两个 tl.set tl.set("#outgoing", { opacity: 0 }, CUT); tl.set("#incoming", { opacity: 0.15, scale: 0.75, filter: "blur(10px)" }, CUT); // Phase 3: Entry —— 全部共享 expo.out tl.to("#incoming", { scale: 1.0, filter: "blur(0px)", opacity: 1.0, duration: 0.5, ease: "expo.out" }, CUT); window.__timelines["main"] = tl; </script>

这段骨架直接对应本目录 phase 1–3 的数值配方，并且天然满足 seek-safe 约束：tl.set与fromTo状态都被时间线记录，任意帧位置的渲染结果确定且可逆。

结语：把接缝变成"同一架摄像机"

帧内接缝是 HyperFrames 合成中"一镜到底"感的来源。四个变体共享同一条物理法则——在峰值速度处剪辑、两侧方向与速度匹配——差异只在轴、作用域与颗粒度：Z 轴的 zoom-through（前推/后退）服务状态变更与抵达重音，x/y 轴的 cut-the-curve 是 Scene 间过渡的默认项，waterfall 把同一手法细化到词级用于文本换行。配合按主体尺度缩放的模糊逻辑（文本 10px、全帧 18–20px）与"剪辑帧处数值完全匹配"的硬规则，帧工人可以在自己的暂停 GSAP 时间线上，把一帧内部的多次替换与切换编织成一次连续、有深度、有速度的运镜。

要把它接入完整工作流：Step 4 写镜头序列时，在 visual-design 阶段 用 motion-language.md 的词汇表把接缝命名为zoom-through/cut-the-curve/waterfall（并引用本目录）；Step 5 帧工人读取本目录按配方实现。帧间的整帧转场仍由故事板的transition_in交给装配器，从 transitions.json 的注册表词汇中选取——两层剪辑各司其职，共同构成"从一帧到整片"的连续视觉语言。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes