1仕組みと動作原理
1つの原理が5つのシーム技法を統括:速度のピークでカットし、両側の方向と速度を一致させる。さらに2つのシーン内技法(§6 インカスケード/§7 グループスライド)が加わる。
Five SEAM techniques, one principle: **cut at peak velocity, match direction and speed on both sides of the cut** — plus the two in-scene techniques (§6 arrivals, §7 slides).
速度整合の力学は「1本の power4.inOut を半分に割る」こと:アウト側 power4.in + イン側 power4.out を同一の距離と時間で実行し、カット点での速度を厳密に一致させる。
- **Mirrored eases:** exit `power4.in` + entry `power4.out`, same distance and duration — the two halves of one `power4.inOut`, so velocity matches exactly at the cut.
デフォルトのシーン境界は cut-the-curve かつ部分変位を採用:画面の約12%(1920幅で約230px)とし、全画面のフレームアウトは厳禁。4方向それぞれに出/入の始点・終点値を定義(左:出 0→−230/入 +230→0、他も同様)。
**Partial travel:** ~12% of frame (≈230px at 1920) — never full off-screen moves. | Direction | Exit | Entry start → end | | --------- | ------------- | ----------------- | | Leftward | `x: 0 → −230` | `x: +230 → 0` |
フェードアウトの技巧:アウト側の不透明度は移動量の約25–30%時点でゼロに達し(フェード約0.18–0.3sに対し運動0.3–0.34s)、イン側は移動経路の中間地点(不透明度約0.35)から点火。最後に消える要素はカット点と完全に同期して消滅させ、静止した空白区間(デッドエア)を一切作らない。
- **The fade trick:** exit opacity completes at ~25–30% of its travel (fade ≈ 0.18–0.3s vs motion 0.3–0.34s); entry ignites at ~0.35 opacity mid-path. Time the last fading element to die right at the cut — a gap where nothing moves reads as dead air.
Z軸の方向は符号で決まる:同一軸だけでは不十分であり、d(scale)/dt の符号が両側で一致している必要がある(プッシュ:出 1→1.2/入 0.75→1、プル:出 1→0.8/入 1.25→1)。禁止されるミラー構成は2種類:縮小アウト+極小からの拡大イン(要素のデフォルトが拡大インのため頻発しやすい)、およびプッシュアウト+特大からの収縮イン。さらに本制約は**イン側シーン自体の登場アニメーション**(カット点+約0.5s枠)にも波及し、Seam Gate 第7条に沿った検証が必須。
| Push (forward) | growing `1 → 1.2` | growing `0.75 → 1` | zoom-through | | Pull (back) | shrinking `1 → 0.8` | shrinking `1.25 → 1` | inverse zoom-through |
被写体スケールに応じたブラー階層:テキストスケール(タイトル、語句)はピーク10px(20pxは文字の輪郭を潰し、速度感ではなく描画バグに見える)、フルスクリーン面(ウィンドウ、カード、スクショ)は18–20px(大面積の微小ブラーはレンダリングのコマ落ちに見える)。切り替えフレームでは両側で同一のピーク値を使用し、ブラーはラッパーに適用して子要素には絶対にかけない。
| Text-scale (headline, word group) | **10px** | 20px smears letterforms — the cut reads as a glitch, not speed | | Full-frame surface (window, card, screenshot) | **18–20px** | lighter blur on a big surface reads as a rendering hiccup |
waterfall cut(§4)と waterfall entry(§6)は全く異なるルールセットであり混用厳禁:シーム版は不透明度0.35の中途から点火(フェードイン自体が速度演出)、イン版は tl.set による二値 0→1(フェードインはスナップ感を弱める)。シーム版はカレントに沿ったX軸かつアウト側が存在するのに対し、イン版はデフォルトY軸かつアウト側を持たない。
| Opacity | BINARY 0→1 via `tl.set` at entry — never fade | ignites at 0.35 mid-path — the fade IS the velocity trick | | Axis default | Y, from below | X, riding the current | | Outgoing side | none | words ramp out on mirrored power4.in |
waterfall entry の構成基準:リレーは行列待ちではない。先行要素が静止する前(±2フレーム)に次が始動し、間隔を段階的に縮め、末尾の要素が鋭く収束する。速度は要素の重みに応じて調整(アンカー/重:60–80px・0.16–0.20s、通常単語:40–50px・0.13–0.16s、軽量/記号:30–48px・0.10–0.13s)。イージングは power4.out を使用し、インに .inOut は厳禁。終盤では最後の単語を分解してクライマックスを伸長させる。
- **Overlap, don't queue** — next element starts within ±2 frames of the previous settling; gaps SHRINK across the cascade; the last element snaps. - **Velocity varies by weight** — heavy/anchor elements travel further and longer; light words/punctuation snap in tight:
nudge curve(§7)は3つのトゥイーンで構成された曲線であり、10% / 65% / 25% の移動距離を 20% / 18% / 62% の時間比率にマッピング:power3.in で始動し、linear バースト(平均 px/フレームの約2倍)を経て、power4.out のロングテールで着地。テール時間は始動時間の3倍以上を確保しないと急停止感(smack)が生じる。新規コンテンツはバーストフェーズ内で出現させる(バーストが出現を隠蔽)。
| 1 ramp-in | `power3.in` | ~10% | ~20% | barely moves — motion registers, no jolt | | 2 burst | `none` (linear) | ~65% | ~18% | ~2× average px/frame — purposeful | | 3 tail | `power4.out` | ~25% | ~62% | decaying creep to rest — kills the smack |
rack-focus blur-cut(§5)は「カットを意図的に見せる」唯一の技法:手持ちDSLRのフォーカス送りのように、ピントボケのブラーピークで1フレームのハード切り替えを隠蔽。アウト側はカット直前まで完全不透明を維持し、イージングには運動感ではなく光学感を出す power2.in/out を採用。ナラティブなビートに限定し、使用頻度は約8秒に1回以下、字幕表示中やホールドショットでは絶対に使用しない。ブラーピークは≥6px、標準8–12px、上限16–18pxとし、必ずピーク地点でカットを行う。
The one variant where the cut is SEEN: a defocus blur SPIKE hides a single-frame hard swap — a handheld-DSLR focus-pull.
実行可能なコードはすべて examples/gsap-implementation.md に集約:ワーカー版(シーン内要素操作)とレジストリ版(2つのクリップラッパーに __OLD__/__NEW__/__T__/__DUR__/__DX__/__DY__ プレースホルダーで注入)の2系統に加え、waterfall の DOM/CSS/JS、rack-focus、パラメータ調整範囲テーブルを完備。
All GSAP templates — worker-authored versions, registry `gsap_template`s, the combined cut-the-curve + zoom, waterfall DOM/CSS/JS, rack-focus — live in `examples/gsap-implementation.md`.
waterfall cut の実装詳細:移動量 ±230px、アウト側 0.34s power4.in、アウト側フェード 0.18s を x 移動と同時始動(移動量の約25–30%で単語が消滅し残像を防止)、読字順に +0.022s のスタッガー(全体スライドではなく剥離感)、イン側 0.3s power4.out、イン開始時不透明度 0.35、イン側間隔 0.05s × 0.84 減衰。全単語を構築時に x:+230 / opacity:0 に事前配置すること(immediateRender:false のみに頼ると未開始の単語が静止位置に露出する)。
- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false` alone leaves un-started words visible at rest.
cut-the-curve のイン側は、レジストリテンプレート内で __DXIN__ / __DYIN__ × 0.12(水平)/ × 0.21(垂直)を用いて逆方向イン移動を表現しているが、seam-craft のプレースホルダー一覧には __DX__ / __DY__ しか定義されておらず、トークン命名に不整合が存在。
`__DX__` = `-1920` (LEFT) / `1920` (RIGHT); `__DY__` = `-1080` (UP) / `1080` (DOWN). The `* 0.12` / `* 0.21` factors yield the ~12% partial travel.
ワーカー版とレジストリ版の統合バリエーション(cut-the-curve + わずかなZプル)もZ符号ルールを厳守:両側ともに縮小(アウト 1→0.92、イン 1.08→1)とし、縮小アウトに拡大インを組み合わせる構成は厳禁。
The scale component obeys the Z sign rule: both sides SHRINK (exit `1 → 0.92`, entry `1.08 → 1`) — a consistent mild pull layered on the lateral cut. Never pair a shrinking exit with a grow-from-small entry here.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| package | 上位 skill 依赖:motion-doctrine(接缝法、电流、账本、Seam Gate 的归属地) |
| package | 同仓组件:transition registry 的 gsap_template(注入器按 token 施加到两个 clip wrapper)、seam-craft(stage ground 前置) |
| package | GSAP(模板代码运行于宿主 composition 的 GSAP 时间线;本 skill 不自带库) |
4推奨統制措置と判定根拠
- SKILL.md: スクリプト実行や外部影響を一切含まない、純粋なプロンプト指示およびルール文書
5二重目の独立検証
- [ok] 「五个接缝」是否每条都有可抄实现(防止目录表吹牛) — examples/gsap-implementation.md 逐条核对:§1 Zoom-Through(worker + registry 两版)、§2 Inverse(registry 版 + 说明 worker 只是翻符号)、§3 Cut the Curve(worker + registry 横/竖两版 + 合并 zoom 版)、§4 Waterfall Cut(DOM/CSS + wordExit/wordEnter 时间线函数)、§5 Rack-Focus、§6 Waterfall Entry、§7 Nudge Curve(含 150px 变体)。声明与实现相符。
- [discrepancy] registry 模板的 token 是否与 seam-craft 的占位符契约一致(跨 skill 引用是否自洽) — 存在一处不闭合:examples 的 registry 模板入场用 `__DXIN__ * 0.12` / `__DYIN__ * 0.21`(而注释只解释 `__DX__ = -1920 (LEFT) / 1920 (RIGHT)`),但 seam-craft 的占位符表只列 `__OLD__ / __NEW__ / __T__ / __DUR__ / __DX__ / __DY__ / __ORIGIN_OUT__ / __ORIGIN_IN__`——**没有 `__DXIN__` / `__DYIN__`**。即这份模板若要真被注入器施加,入场侧的水平/垂直位移 token 名对不上(需注入器额外提供或模板改为取负)。属跨文档的 token 命名漂移,照抄可能注入失败或被替换为空。
- [ok] 难度最高的那条规则(Z 符号绑定入场场景自身入场)是否在别处有一致说法 — cut-the-curve 的 Z 符号段 + 反模式表两处,以及 §2 的 Sign discipline(`the incoming scene arrives as a composed frame inside the retracting wrapper — no grow-from-small intro in the seam window`)措辞一致;motion-doctrine 的 Seam Gate 段亦列 `the Z sign rule … the incoming scene's own entrances are scanned for sign-fighting`,三处自洽。
- [ok] §3 列出的 stage ground 前置与 seam-craft 是否一致(跨页重复会不会打架) — 两页都写 `background: var(--canvas-deep, var(--canvas, #000))`,且本页显式 `(see seam-craft)` 交回详情;无参数冲突。该表达式与代码实现的形式差异(pin 内 canvas-deep 零命中、assemble-index.mjs 实际输出 frame.md canvas 色)已记在 seam-craft 的分析中。
- [ok] 数值是否被第一遍夸大(例:把 rack-focus 的配额写成建议值) — 原文硬写 `≤ once per ~8s; never mid-caption or during a hold`,并给上下限 `≥6px; peak 8–12px, ≤16–18px max`;本 JSON 照录,未软化。
- [ok] 是否存在被遗漏的外部资源(CLI/API/包) — 两文件全文 URL 零命中;无 npx/CLI 调用语句。唯一外部依赖是 GSAP 运行时(由宿主 composition 提供)与同仓的 motion-doctrine / transition registry / seam-craft(文档互指)。
6結論
f788ef0474b6f6ce…