cut-the-curve

切曲线——技术目录

五种SEAM技术，一个原则：在峰值速度处剪切，匹配剪切两侧的方向和速度——加上两种场景内技术（§6入场，§7滑动）。SEAM法则——向量法则、流向、记录、SEAM门——位于motion-doctrine中；请先阅读。本技能提供参数和机制。所有GSAP代码模板（worker + registry）：examples/gsap-implementation.md。

目录

#	技术	范围	轴	用途
1	缩放穿越（正向）	场景内文字交换	Z，朝向观众	深入同一思路
2	反向缩放穿越	到达/高潮节拍	Z，远离观众	更大事物落地
3	切曲线	场景间	X / Y	默认边界，影片流向
4	瀑布切	文字到文字接缝	X，逐词	大字幕节拍之间的逐词交接
5	拉焦模糊切	同表面状态交换	X / Y / Z	希望被看到的剪切——单反拉焦效果
6	瀑布入场	场景内到达（无接缝）	Y，从下方	标题卡、片段开场、列表介绍
7	微推曲线	场景内组滑动（无接缝）	X / Y	重新定位已组合的组以腾出空间

Z方向是符号

Z轴上仅“同轴”不够——d(scale)/dt的符号必须在剪切两侧匹配：

Z向量	退出缩放	进入缩放	变体
推（向前）	增大 1 → 1.2	增大 0.75 → 1	缩放穿越
拉（向后）	缩小 1 → 0.8	缩小 1.25 → 1	反向缩放穿越

禁止的镜像：后退的退出被从小变大的进入回应（拉翻转为推——常见情况，因为从小变大是默认元素入场），以及推的退出被超大收缩回应。这约束了进入场景在接缝窗口（剪切 + 约0.5秒）内的自身入场，而不仅仅是包装器补间：保持进入帧构图，或编写其入场以匹配符号。根据SEAM门规则7验证。

模糊逻辑（所有Z变体）

主体	峰值模糊	原因
文字缩放（标题、词组）	10px	20px会使字母模糊——剪切看起来像故障，而非速度
全帧表面（窗口、卡片、截图）	18–20px	大表面上较轻的模糊看起来像渲染问题

在交换帧处两侧峰值模糊相同。模糊包装器，绝不模糊子元素。

---

1. 缩放穿越（正向）

Z轴速度匹配剪切；绝不同时显示两个文本。 所有元素增大：退出文字加速朝向相机，硬切换在峰值模糊处隐藏，进入文字继续增大进入焦平面。仅限标题和短句。总时长约0.4秒。

阶段	缩放	模糊	不透明度	缓动	时长
退出	1 → 1.2	0 → 10px	1 → 0.15	power3.in（不透明度：单独none补间）	0.2s
剪切（tl.set）	进入: 0.75	10px	退出: 0 / 进入: 0.15	—	—
进入	0.75 → 1	10 → 0px	0.15 → 1	expo.out	0.5s

退出不透明度必须是独立的线性补间——power3.in使不透明度在接近1处停留过久。进入时所有属性共享expo.out。

2. 反向缩放穿越（反向）

拉回镜像：退出元素后退；进入元素以超大尺寸到达（仿佛刚在相机后方）并收缩进入焦平面。所有元素缩小。用于到达/高潮节拍——高潮台词、巨大回应、最终状态——而非普通边界。总时长约0.7秒（30%退出 / 70%进入）。

阶段	缩放	模糊	不透明度	缓动	时长
退出	1 → 0.8	0 → 10px	1 → 0.15	power3.in（不透明度：单独none补间）	~0.2s
剪切（tl.set）	进入: 1.25	10px	退出: 0 / 进入: 0.15	—	—
进入	1.25 → 1	10 → 0px	0.15 → 1	expo.out	~0.5s

模糊为10px文字缩放；仅当两侧均为全幅表面时使用18–20px。

符号纪律： 进入场景以构图帧形式出现在收缩包装器内——接缝窗口内无从小变大的介绍。阶段性入场在收缩稳定后开始，或从≥1开始并收缩。

3. 切曲线（默认场景边界）

X/Y速度匹配剪切——所有场景到场景边界的默认方式，遵循影片流向，而非强调。退出主体朝一个方向加速，剪切在运动中途落地，进入主体继续相同方向并减速。总时长约0.6秒；方向左/右/上/下（默认左）。

部分行程： 约12%帧（1920下约230px）——绝不全屏移出。

方向	退出	进入起始 → 结束
向左	x: 0 → −230	x: +230 → 0
向右	x: 0 → +230	x: −230 → 0
向上	y: 0 → −230	y: +230 → 0
向下	y: 0 → +230	y: −230 → 0

机制：

• 镜像缓动： 退出power4.in + 进入power4.out，相同距离和时长——即一个power4.inOut的两半，因此速度在剪切处精确匹配。
• 淡出技巧： 退出不透明度在其行程约25–30%处完成（淡出约0.18–0.3秒 vs 运动0.3–0.34秒）；进入在路径中途约0.35不透明度处点燃。计时最后一个淡出元素恰好在剪切处消失——无任何移动的间隙读作死寂。
• 退出0.2–0.4秒；进入≥退出。可选模糊8–10px。
• 舞台背景： #root必须不透明（background: var(--canvas-deep, var(--canvas, #000))）——中间窗口剪切会打开一个总和透明度<1的窗口，否则会闪烁白色（参见seam-craft）。

push-slide存在但违反部分行程和运动中途阶段；优先使用切曲线。

4. 瀑布切（逐词切曲线）

在单词粒度上应用切曲线——文字到文字接缝中最强的向左剪切。退出单词沿各自曲线加速退出；进入单词在半空中级联进入——眼睛跨越接缝的波浪。

范围： 在worker编写的多节拍合成（堆叠的全帧.beat层）内，而非注册/注入类型——它补间单词跨度，而非剪辑包装器。进出文字节拍块的边界仍使用正常注册过渡。不计入2–3个过渡预算。

参数	值	原因
行程	±230px（约12%帧）	部分行程 + 速度 > 全帧推
退出	0.34s power4.in	加速本身就是剪切
退出淡出	0.18s，与x同时开始	单词在约25–30%行程时消失——无拖影
退出交错	+0.022s阅读顺序	行被剥离，而非块滑动
进入	0.3s power4.out	复合体的后半部分——速度匹配
进入起始不透明度	0.35	中途点燃；二进制0→1会弹出
进入间隔	0.05s × 0.84衰减	加速级联，最终构图

规则：

• 每个链一个方向，遵循流向。反向缩放仅作为链的到达节拍。
• 在构建时将所有单词预设为x: +230, opacity: 0——仅immediateRender: false会使未启动的单词在静止时可见。
• 短的第一节拍可以整行退出：其淡出在剪切前约0.02秒结束，以便在下一个单词点燃时仍在运动——无死寂间隙。
• 仅变换/不透明度（安全）；不透明舞台背景适用。

5. 拉焦模糊切（可见剪切）

唯一一种剪切被看到的变体：散焦模糊尖峰隐藏单帧硬切换——手持单反拉焦效果。偶尔用于同一视觉主题内同一表面的状态交换；绝非默认边界。

与其他变体的区别：退出保持完全不透明直到剪切（模糊隐藏切换——无提前淡出）；缓动power2.in / power2.out（柔和光学，而非动量）。

规则：

• 仅在叙事节拍时触发，每约8秒最多一次；绝不在字幕中途或保持期间。
• 在峰值模糊处剪切（≥6px；峰值8–12px，最大≤16–18px）——在上升过程中交换会暴露剪切。
• 微妙的缩放（约1.06镜头呼吸）使其看起来像光学效果。
• 两侧方向相同——向量法则仍然成立。进入时长≥退出时长。
• 模糊包装器；绝不在一个元素上同时模糊和不透明度补间（无头合成错误）；绝不直接模糊<video>（包裹它）。

---

6. 瀑布入场（场景内到达——非接缝）

交错到达级联：单词/元素从下方快速进入（一个一致方向），每个在前一个稳定之前开始——一个加速波，最终形成构图布局。标题卡、片段开场、列表/功能介绍。接缝兄弟是§4；不要混合它们的规则：

	§6 入场（到达）	§4 瀑布切（接缝）
不透明度	通过tl.set在入场时二进制0→1——绝不淡出	在中途0.35处点燃——淡出本身就是速度技巧
默认轴	Y，从下方	X，遵循流向
退出侧	无	单词在镜像power4.in上加速退出

编排：

• 重叠，而非排队——下一个元素在前一个稳定后±2帧内开始；间隙在级联中缩小；最后一个元素快速到位。
• 速度因权重而异——重/锚元素移动更远更久；轻单词/标点快速到位：

参数	锚/重	普通单词	轻/标点
Y偏移	60–80px	40–50px	30–48px
时长	0.16–0.20s	0.13–0.16s	0.10–0.13s
重叠	0–2帧间隙	1帧重叠	1–2帧重叠

• 缓动power4.out（expo.out用于额外快速）；绝不在入场中使用.inOut。
• 每个级联一个方向。
• 将最后一个单词拆分为片段以延长高潮；片段移动更远。
• 稳定后，组通常滑动为下一节拍腾出空间——即§7。

7. 微推曲线（场景内组滑动——非接缝）

慢-快-慢重新定位已组合的组（单词行、卡片堆、列表）以揭示内容或腾出空间。没有单一内置缓动能产生它——power4.inOut会突然停止。在一个属性上链式三个补间：

阶段	缓动	距离	时间	感觉
1 加速进入	power3.in	~10%	~20%	几乎不动——运动被记录，无冲击
2 爆发	none（线性）	~65%	~18%	约2倍平均像素/帧——有目的性
3 尾部	power4.out	~25%	~62%	衰减爬行至静止——消除冲击

规则：

• 尾部时间≥3倍加速进入时间。如果仍有冲击：延长尾部时间（而非距离）或使用power5.out。
• 阶段2保持线性——缓动会失去爆发对比。
• 在阶段2期间揭示新内容——爆发掩盖其出现。
• 垂直方向相同比例；按比例缩放距离，保持时间比例。

---

选择变体

	缩放穿越	反向缩放	切曲线	瀑布切
范围	场景内文字交换	到达/高潮节拍	场景间	文字到文字接缝
Z符号/轴	增大（推）	缩小（拉）	X / Y	X，逐词
行程/缩放	1→1.2，然后0.75→1	1→0.8，然后1.25→1	±230px	±230px
峰值模糊	10px文字/18–20全帧	10px文字/18–20全帧	8–10px可选	无
缓动	power3.in / expo.out	power3.in / expo.out	power4.in / power4.out	power4.in / power4.out
感觉	穿越深入	到达	被侧向携带	跨越接缝的波浪

反模式

不要这样做	改为这样做
缩放穿越期间两个文本可见	在模糊峰值处硬切，一次一个文本
文字缩放主体上使用20px模糊	文字10px；仅全帧使用18–20px
反向缩放退出 → 从小变大进入（或推 → 超大收缩）	匹配缩放速度符号；在剪切±0.1秒处验证
进入合成在Z接缝包装器补间下自身的放大入场	以构图状态到达；在接缝稳定后安排入场或匹配符号
交换处模糊/不透明度不匹配	在剪切帧处使用相同值
温和进入缓动（power2.out）	镜像退出：power4.out / expo.out
全屏退出/进入	部分行程（约12%）+ 提前淡出
剪切任一侧使用.inOut缓动	镜像power4.in / power4.out
单个元素在其剪切前长时间淡出	淡出在剪切前约0.02秒结束，或使用单词级联
瀑布级联中相等间隔	每个单词间隔缩小×0.84
正文文本使用缩放穿越	仅限标题和短句
场景剪切不使用切曲线	它是默认边界
连续边界方向相反	单一流向；保留向量用于意义表达
中间窗口剪切后未上色的#root	不透明舞台背景
排队入场（每个等待前一个稳定）	重叠±1–2帧——级联是波浪，而非队列
每个级联元素使用相同偏移/时长	按权重变化：锚移动更远，标点快速到位
§6入场中使用渐变不透明度淡出	通过tl.set二进制0→1——淡出会破坏快速感（接缝剪切淡出；入场不淡出）
组滑动使用单一缓动（power4.inOut、slow()）	使用§7三阶段链
微推尾部短于加速进入的3倍	延长尾部时间，而非距离

代码

所有GSAP模板——worker编写版本、注册gsap_template、组合切曲线+缩放、瀑布DOM/CSS/JS、拉焦——位于examples/gsap-implementation.md。