コンテンツ制作 · heygen-com/hyperframes

cut-the-curve

技術カタログ:速度整合された5つのSEAM(ズームスルー、インバースズームスルー、カット・ザ・カーブ、ウォーターフォールカット、ラックフォーカス・ブラーカット)に加え、2つのシーン内技術 — ウォーターフォールENTRY(タイトルカード/セグメントオープナー用のスタッガー着地カスケード)およびナッジカーブ(低速-高速-低速の3フェーズグループスライド)を網羅。ミラーリングされたpower4イージングによる部分移動(フレームの約12%)の速度整合、Zスケール符号ルール、サイズに応じたブラー(テキスト10px/フルフレーム18-20px)、単語ごとのスタッガーカット、要素の重みによるカスケードペーシング、10/65/25のスライド比率を解説。トランジション、テキストビートのハンドオフ、キネティックテキストのイン、グループ再配置を作成する前に必読。[depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0(仓库根 LICENSE 为 Apache License Version 2.0)Commit d2f0bc7f34
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

1つの原理が5つのシーム技法を統括:速度のピークでカットし、両側の方向と速度を一致させる。さらに2つのシーン内技法(§6 インカスケード/§7 グループスライド)が加わる。

.claude/skills/cut-the-curve/SKILL.md
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).
ここでの目的:本スキルはパラメータと力学のみを担当し、シームの規範(ベクトル則、カレント、台帳、Seam Gate)は motion-doctrine に集約。役割を明確に分担し、ルールの重複記載を排除。

速度整合の力学は「1本の power4.inOut を半分に割る」こと:アウト側 power4.in + イン側 power4.out を同一の距離と時間で実行し、カット点での速度を厳密に一致させる。

.claude/skills/cut-the-curve/SKILL.md
- **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.
ここでの目的:「速度整合」を抽象的な形容詞から導出可能な数式(同一 inOut の両半分)へと昇華させ、全バリエーション共通の骨格を定義。

デフォルトのシーン境界は cut-the-curve かつ部分変位を採用:画面の約12%(1920幅で約230px)とし、全画面のフレームアウトは厳禁。4方向それぞれに出/入の始点・終点値を定義(左:出 0→−230/入 +230→0、他も同様)。

.claude/skills/cut-the-curve/SKILL.md
**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)から点火。最後に消える要素はカット点と完全に同期して消滅させ、静止した空白区間(デッドエア)を一切作らない。

.claude/skills/cut-the-curve/SKILL.md
- **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.
ここでの目的:トランジション中盤で両側の不透明度が同時に1未満になる理由を解説。seam-craft の白フラッシュ防止ガードが対処する時間枠の発生源を明示(相互参照)。

Z軸の方向は符号で決まる:同一軸だけでは不十分であり、d(scale)/dt の符号が両側で一致している必要がある(プッシュ:出 1→1.2/入 0.75→1、プル:出 1→0.8/入 1.25→1)。禁止されるミラー構成は2種類:縮小アウト+極小からの拡大イン(要素のデフォルトが拡大インのため頻発しやすい)、およびプッシュアウト+特大からの収縮イン。さらに本制約は**イン側シーン自体の登場アニメーション**(カット点+約0.5s枠)にも波及し、Seam Gate 第7条に沿った検証が必須。

.claude/skills/cut-the-curve/SKILL.md
| 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 |
ここでの目的:最も陥りやすい「符号の不一致」を明文で禁止し、シーン内部のインアニメーションまで責任範囲を拡大(ラッパー修正のみで済ませない)。納品物は motion-doctrine の z-sign-scan で直接検証可能。

被写体スケールに応じたブラー階層:テキストスケール(タイトル、語句)はピーク10px(20pxは文字の輪郭を潰し、速度感ではなく描画バグに見える)、フルスクリーン面(ウィンドウ、カード、スクショ)は18–20px(大面積の微小ブラーはレンダリングのコマ落ちに見える)。切り替えフレームでは両側で同一のピーク値を使用し、ブラーはラッパーに適用して子要素には絶対にかけない。

.claude/skills/cut-the-curve/SKILL.md
| 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軸かつアウト側を持たない。

.claude/skills/cut-the-curve/SKILL.md
| 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 |
ここでの目的:対照表を用いて§6と§4の差異を明確化し、インカスケードのフェードイン規則をシームに誤適用するのを防止(アンチパターン表にも明記)。

waterfall entry の構成基準:リレーは行列待ちではない。先行要素が静止する前(±2フレーム)に次が始動し、間隔を段階的に縮め、末尾の要素が鋭く収束する。速度は要素の重みに応じて調整(アンカー/重:60–80px・0.16–0.20s、通常単語:40–50px・0.13–0.16s、軽量/記号:30–48px・0.10–0.13s)。イージングは power4.out を使用し、インに .inOut は厳禁。終盤では最後の単語を分解してクライマックスを伸長させる。

.claude/skills/cut-the-curve/SKILL.md
- **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)が生じる。新規コンテンツはバーストフェーズ内で出現させる(バーストが出現を隠蔽)。

.claude/skills/cut-the-curve/SKILL.md
| 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 |
ここでの目的:組み込みイージングが存在しない「緩-急-緩」の感触を再現可能なパラメータに分解し、power4.inOut がなぜ失速感を招くのかを論理的に解説。

rack-focus blur-cut(§5)は「カットを意図的に見せる」唯一の技法:手持ちDSLRのフォーカス送りのように、ピントボケのブラーピークで1フレームのハード切り替えを隠蔽。アウト側はカット直前まで完全不透明を維持し、イージングには運動感ではなく光学感を出す power2.in/out を採用。ナラティブなビートに限定し、使用頻度は約8秒に1回以下、字幕表示中やホールドショットでは絶対に使用しない。ブラーピークは≥6px、標準8–12px、上限16–18pxとし、必ずピーク地点でカットを行う。

.claude/skills/cut-the-curve/SKILL.md
The one variant where the cut is SEEN: a defocus blur SPIKE hides a single-frame hard swap — a handheld-DSLR focus-pull.
ここでの目的:例外的な技法に対して使用上限とブラーの許容範囲を設定し、汎用トランジションとしての乱用を防止。合成上の落とし穴(同一トゥイーン内での blur+opacity 混在禁止、<video> への直接ブラー禁止など)も提示。

実行可能なコードはすべて examples/gsap-implementation.md に集約:ワーカー版(シーン内要素操作)とレジストリ版(2つのクリップラッパーに __OLD__/__NEW__/__T__/__DUR__/__DX__/__DY__ プレースホルダーで注入)の2系統に加え、waterfall の DOM/CSS/JS、rack-focus、パラメータ調整範囲テーブルを完備。

.claude/skills/cut-the-curve/SKILL.md
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`.
ここでの目的:コードとルールを別ファイルに分離し、SKILL.md には数値と判定基準のみを記載。調整範囲テーブル(移動150–300px、ブラー6–10px、アウト0.2–0.4s、イン≥アウト等)も完備。

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 のみに頼ると未開始の単語が静止位置に露出する)。

.claude/skills/cut-the-curve/SKILL.md
- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false` alone leaves un-started words visible at rest.
ここでの目的:単語分割版の全パラメータと致命的な罠を提示。multi-beat comp 内の単語 span 専用であり、トランジション予算を消費しない点も明記。

cut-the-curve のイン側は、レジストリテンプレート内で __DXIN__ / __DYIN__ × 0.12(水平)/ × 0.21(垂直)を用いて逆方向イン移動を表現しているが、seam-craft のプレースホルダー一覧には __DX__ / __DY__ しか定義されておらず、トークン命名に不整合が存在。

.claude/skills/cut-the-curve/examples/gsap-implementation.md
`__DX__` = `-1920` (LEFT) / `1920` (RIGHT); `__DY__` = `-1080` (UP) / `1080` (DOWN). The `* 0.12` / `* 0.21` factors yield the ~12% partial travel.
ここでの目的:スキル間参照の2巡目監査における発見事項。注釈では __DX__/__DY__ のみ解説されているが、実装コードではイン側に __DXIN__/__DYIN__ が使用されている不整合を指摘。

ワーカー版とレジストリ版の統合バリエーション(cut-the-curve + わずかなZプル)もZ符号ルールを厳守:両側ともに縮小(アウト 1→0.92、イン 1.08→1)とし、縮小アウトに拡大インを組み合わせる構成は厳禁。

.claude/skills/cut-the-curve/examples/gsap-implementation.md
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コア機能

01Zoom-Through(Z前方):同シーンのテキスト切り替え、全編拡大、ブラーピークでハードカット、合計約0.4s、透明度は独立した線形トゥイーン必須
02Inverse Zoom-Through(Z後方):登場要素が極大から焦点面へ収束、着地/リワード用ビート、合計約0.7s(出30%/入70%)
03Cut the Curve(X/Y):デフォルトのシーン境界、カレント方向追従、±230px部分移動+ミラーリングpower4イージング
04Waterfall Cut(単語単位版):出+0.022s読字順スタッガー、0.18sフェードアウト、入0.3s power4.out、入間隔0.05s×0.84減衰、開始時不透明度0.35
05Rack-Focus Blur-Cut(可視カット):ブラーピークで1フレーム切り替えを隠蔽、power2系イージング、ピーク8–12px、約8秒に1回以下
06Waterfall Entry(シーン内着地):二値不透明度表示+重み別速度+漸減間隔、タイトルカード/セグメントオープナー/リスト導入用
07Nudge Curve(シーン内グループスライド):10/65/25移動量と20/18/62時間比率の3フェーズチェーン、次拍への退避や新コンテンツ表示
08選定マトリクス+2つのアンチパターン表(examples内にパラメータ調整範囲表を併録)

3外部依存関係

KindDependency / Endpoint
package上位 skill 依赖:motion-doctrine(接缝法、电流、账本、Seam Gate 的归属地)
package同仓组件:transition registry 的 gsap_template(注入器按 token 施加到两个 clip wrapper)、seam-craft(stage ground 前置)
packageGSAP(模板代码运行于宿主 composition 的 GSAP 时间线;本 skill 不自带库)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: スクリプト実行や外部影響を一切含まない、純粋なプロンプト指示およびルール文書
監査ノート: 項目別検証(評価対象=スキル自身のディレクトリ):ディレクトリ内はmarkdown 2ファイルのみ(SKILL.md+examples/gsap-implementation.md)。スクリプトファイル、URL/エンドポイント、process.envや認証情報の読み込み、ディスク書き込み、サブプロセス呼び出しは一切なし。サンドボックス回避や対自動化を意図した記述も皆無。全編がカット位置、変位量、イージング種別、ブラー量などのパラメータと判定基準で構成されており、攻撃表面がゼロであるため「緑(安全)」と判定。

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結論

  • 「速度整合」を感覚的な形容詞ではなく、導出可能な力学(1本のpower4.inOutを二分)として定式化
  • デフォルト境界+部分移動(約12%)を標準化し、反するプッシュスライドを明示的に排除して選定の迷いを削減
  • 最も頻発するZ符号の不一致を明文で禁止し、後続シーン自体のインアニメーションまで検証対象を拡大
  • 被写体サイズに応じたブラー階層を失敗兆候とともに定義し、客観的な判定を可能に
  • §4シーム版と§6イン版の差異を対照表で厳密に区分し、ルールの混同を防止
  • コードと規範を明確に分離し、examples内に2系統のテンプレートと調整範囲を網羅
  • 最適な用途: 推奨対象:あらゆるトランジション、テキストビートの引き渡し、キネティックテキストのイン、要素グループの再配置を設計する前の必読リファレンス。hyperframes リリース映像や解説動画のトランジション・インパラメータ集として最適。motion-doctrine(規範)との併読を推奨:台帳とカレントを定めた後、本カタログで技法と数値を参照し、最終的に seam-gate で検証するフローに合致。
    不向きな用途: 非推奨対象:① パラメータを詰めずにトランジション名だけを求めるケース(本カタログはほぼ全編が数値と判定基準で構成);② HyperFramesやGSAP以外のタイムライン環境(全パラメータがGSAPのイージングとクリップラッパー構造に依存);③ スクリプトによる自動適用を期待するケース(生成・検証は motion-doctrine の seam-stamp/seam-gate が担当);④ __DXIN__/__DYIN__ のトークン不整合を解決せずにレジストリテンプレートを独自インジェクターへ直貼りするケース。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload cut-the-curve.tar.gz
    sha256: f788ef0474b6f6ce…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.