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	你想被「看見」的那個切 — DSLR 對焦環效果
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.2 秒
切換（tl.set）	進入: 0.75	10px	退出: 0 / 進入: 0.15	—	—
進入	0.75 → 1	10 → 0px	0.15 → 1	expo.out	0.5 秒

退出不透明度必須是獨立的線性補間 — power3.in 會讓不透明度過久維持接近 1。
進入時所有屬性共用 expo.out。

2. 反向縮放穿越（向後）

拉回鏡像：退出的元素後退；進入的元素過大（彷彿就在鏡頭後方）並縮回焦平面。所有元素都縮小。用於進場/收尾節拍 — 一句收尾台詞、一個巨大的回應、一個靜止的最終狀態 — 永遠不用於普通邊界。總長約 0.7 秒（30% 退出 / 70% 進入）。

階段	縮放	模糊	不透明度	緩動	持續時間
退出	1 → 0.8	0 → 10px	1 → 0.15	power3.in（不透明度：獨立 none 補間）	~0.2 秒
切換（tl.set）	進入: 1.25	10px	退出: 0 / 進入: 0.15	—	—
進入	1.25 → 1	10 → 0px	0.15 → 1	expo.out	~0.5 秒

模糊為 10px 文字縮放；僅當兩側皆為全出血表面時使用 18–20px。

符號紀律： 進入場景以構圖完成的畫面形式出現在縮回包裝層內 — 在接縫窗口內沒有從小放大的進場。分階段進場在縮回穩定後發生，或從 ≥1 開始並縮回。

3. 切曲線（預設場景邊界）

X/Y 速度匹配切換 — 所有場景到場景邊界的預設，在影片的電流中，而非強調。退出的主角朝一個方向加速，切換落在運動中途，進入的主角繼續相同方向並減速。總長約 0.6 秒；方向 LEFT / RIGHT / UP / DOWN（預設 LEFT）。

部分移動： 約畫面 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 層）內製作，NOT 一個 registry/injector 類型 — 它補間文字跨度，而非剪輯包裝層。進出文字節拍區塊的邊界仍然使用正常的 registry 轉場。不計入 2–3 個轉場預算。

參數	值	原因
移動距離	±230px（約畫面 12%）	部分移動 + 速度 > 全畫面推
退出	0.34 秒 power4.in	加速本身就是切換
退出淡出	0.18 秒，與 x 同時開始	字在移動約 25–30% 時消失 — 無殘影
退出錯開	+0.022 秒閱讀順序	行被剝離，而非區塊滑動
進入	0.3 秒 power4.out	複合體的後半 — 速度匹配
進入起始不透明度	0.35	中途點火；二進位 0→1 會跳躍
進入間隔	0.05 秒 × 0.84 衰減	加速級聯，最終構圖完成

規則：

• 每個鏈條一個方向，順應電流。反向縮放僅用於鏈條的進場節拍。
• 在構建時將所有字預設為 x: +230, opacity: 0 — 僅 immediateRender: false 會讓未啟動的字在靜止時可見。
• 短的第一節拍可以整行退出：其淡出在切換前約 0.02 秒結束，以便在下一個字點燃時仍在移動 — 無死寂間隙。
• 僅變換/不透明度（搜尋安全）；不透明舞台背景適用。

5. 焦點模糊切（可見的切）

唯一一個切換被「看見」的變體：一個失焦模糊尖峰隱藏了單影格硬切換 — 手持 DSLR 對焦環效果。作為偶爾的點綴，用於同一視覺主題內同一表面的狀態交換；永遠不是預設邊界。

與其他變體的差異：退出保持完全透明直到切換（模糊隱藏了交換 — 無提前淡出）；緩動 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.20 秒	0.13–0.16 秒	0.10–0.13 秒
重疊	0–2f 間隔	1f 重疊	1–2f 重疊

• 緩動 power4.out（expo.out 用於額外快速）；永遠不要在進場使用 .inOut。
• 每個級聯一個方向。
• 將最後一個字拆分成片段以延長高潮；片段移動更遠。
• 穩定後，群組通常會滑動以騰出空間給下一個節拍 — 那是 §7。

7. 微推曲線（場景內群組滑動 — 非接縫）

慢-快-慢重新定位已構成的群組（文字行、卡片堆疊、列表）以顯示內容或騰出空間。沒有單一內建緩動可以產生它 — power4.inOut 會猛然停止。在一個屬性上鏈接三個補間：

階段	緩動	距離	時間	感覺
1 加速	power3.in	~10%	~20%	幾乎不動 — 運動被記錄，無衝擊
2 爆發	none（線性）	~65%	~18%	約 2 倍平均 px/影格 — 有目的
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 製作的版本、registry gsap_template、組合的切曲線 + 縮放、瀑布 DOM/CSS/JS、焦點模糊 — 位於 examples/gsap-implementation.md。