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

seam-craft

HyperFramesローンチ動画におけるシーン間シームのレンダリング正確性ドクトリン — トランジションをマスタータイムライン上で正しく合成するための前提条件を定義します。マスタータイムラインや index.html の組み立て時、カットやクロスフェードのシームで白いフラッシュが発生した際(特にダークトーンの映像)、トランジションの不透明度の落ち込みが透けて見える原因の分析時、またはオーバーラップするシーンラッパーのレンダリング側ブレンド機構の検証時にロードしてください。不透明なステージ背景(#root の背景色)による白フラッシュ防御策や、インジェクターがラッパーをオーバーラップさせ、最終フレームを保持し、トラックをピンポン処理して、リントを通過するテンプレートコードをマスタータイムラインへ刻印する仕組みを網羅しています。※各トランジションの個別カタログは含まれていません。個別のトランジション定義については transition registry を参照してください。

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仕組みと動作原理

本書が管轄するのは特定トランジションの実装ではなく「あらゆるトランジションが正しく合成されるための前提条件」です。個別のトランジションカタログは transition registry にあり、本書はその下層にある共通ドクトリンのみを扱います(crossfade / push-slide / zoom-through / cut-the-curve などのカタログは別リソースに存在)。

.claude/skills/seam-craft/SKILL.md
This is the **render-correctness doctrine** for PLV scene-to-scene seams: the prerequisites and master-timeline mechanics that make any transition composite correctly, independent of which specific transition is chosen. The per-transition catalog (crossfade, push-slide, zoom-through, cut-the-curve, …) lives in the transition registry — this page is the doctrine that sits underneath all of them.
ここでの目的:cut-the-curve との役割分担を明確化すること。cut-the-curve が「どのトランジションを選び、パラメータをどう設定するか」を提供するのに対し、seam-craft は「レンダリング時にそれらの条件を満たす必要がある理由」を提供し、同一ルールの重複管理を防ぎます。

白フラッシュ防御(正確性に関する中核的課題):一部のトランジションでは2つのラッパーの不透明度合計が1未満になる区間が発生します。#root に不透明な背景色が指定されていない場合、レンダラーはこの「窪み」をデフォルトの白ページと合成してしまい、接合部ごとに白い閃光が発生します(ダークトーンの映像では特に目立ち、作者の記録では Spotify 案件で2回観測)。

.claude/skills/seam-craft/SKILL.md
Several templates open a window where the two wrappers' summed opacity < 1 (the cut-the-curve mid-window cut, zoom-through's 0.15 floor, plain crossfade's power-curve dip). Whatever is BEHIND the wrappers shows through during that window. If the assembled `index.html` `#root` has no opaque background, the renderer composites the dip over its default **white** page → a white flash at every seam, glaring on dark films (observed on two Spotify runs before the fix).
ここでの目的:「白フラッシュ」を見映えの問題から合成レイヤーの問題へと論理的に還元し、この現象を引き起こす3つのテンプレート(cut-the-curve の中段カット、zoom-through の 0.15 下限、標準 crossfade の power 曲線による窪み)を特定すること。cut-the-curve/SKILL.md 内の zoom-through 退場不透明度 0.15 と相互検証可能です。

修正は必須の前提条件:#root に不透明な背景色を塗布し、assemble-index.mjs がその出力を担保すること。これらのテンプレートを利用する他のコンシューマも同等の保証を自己責任で行う必要があります。

.claude/skills/seam-craft/SKILL.md
**The assembler must paint the stage:** `#root { background: var(--canvas-deep, var(--canvas, #000)) }` — `assemble-index.mjs` now emits this; any other consumer of these templates owns the same guarantee.
ここでの目的:CSS表現の提示と責任コンポーネントの明示(assemble-index.mjs、ピン留めされた skills/product-launch-video|faceless-explainer|music-to-video|pr-to-video の4箇所に実在)を同時に行い、「このテンプレートを使う者が責任を負う」ことを明確化します。

インジェクターによるトランジション適用の4ステップ機構:退場ラッパーの data-duration を延長(最終フレームを静止)→ 入場ラッパーの data-start を前倒し(オーバーラップ区間を生成)→ 全クリップの data-track-index を 0/1 のピンポンに再配置(同トラックの重複は不可、上位トラックが前面)→ T=オーバーラップ開始位置で window.__timelines["main"] に gsap_template を注入。

.claude/skills/seam-craft/SKILL.md
1. Extends `#el-<from>` wrapper `data-duration` by `duration_s` (holds its final frame — verified: `core/src/runtime/init.ts:1393-1410` external-slot branch). 2. Pulls `#el-<to>` wrapper `data-start` earlier by `duration_s` (creates the overlap window). 3. Reassigns **all** clip `data-track-index` as a 0/1 ping-pong so the two overlapping wrappers never share a track (same-track overlap is illegal — `core/src/lint/rules/composition.ts`). Higher track composites on top. 4. Stamps the `gsap_template` into `window.__timelines["main"]` at `T = overlap-start`.
ここでの目的:本スキルで最も「実装原理」に踏み込んだ部分。美学ではなくレンダリング機構(クリップゲーティング、トラックピンポン、マスタータイムライン注入)を解説し、項目ごとにソースコードの対応箇所を提示します。

適用範囲の厳密な定義:Tier-B-ready(オーバーレイDOMの注入やシーン側の協調を必要とせず、2つのシーンラッパーに対する純粋な transform/opacity/filter 操作のみを行うもの)のトランジションのみを対象とします。オーバーレイ系(staggered blocks、blinds、light leak、grid dissolve、page burn)やシェーダートランジションは次フェーズへ明示的に延期されています。

.claude/skills/seam-craft/SKILL.md
The transitions this doctrine governs are **Tier-B-ready**: pure transform / opacity / filter on the two scene **clip wrappers** (`#el-<sid>`), no injected overlay DOM, no per-scene cooperation. Overlay families (staggered blocks, blinds, light leak, grid dissolve, page burn) and shader transitions are deferred to later phases.
ここでの目的:機構を解説する前に適用境界を宣言し、保証対象外のトランジションファミリーへ本書のドクトリンを誤適用することを防ぎます。

テンプレートプレースホルダーの規約:__OLD__ / __NEW__(引用符付きラッパーセレクタ)、__T__(マスタークロック上のオーバーラップ開始点)、__DUR__(該当接合部の duration_s)、__DX__ / __DY__(方向ごとの変位 ±1920 / ±1080)、__ORIGIN_OUT__ / __ORIGIN_IN__(squeeze 用の transformOrigin ペア)。

.claude/skills/seam-craft/SKILL.md
| `__OLD__` | `"#el-<from>"` — outgoing clip wrapper selector (quoted) | | `__NEW__` | `"#el-<to>"` — incoming clip wrapper selector (quoted) | | `__T__` | overlap-start time in seconds (master clock) | | `__DUR__` | `duration_s` for this boundary |
ここでの目的:インジェクターの置換規約を一覧化し、registry 内の gsap_template とインジェクターを疎結合に保つこと(テンプレートはトークンのみを解釈)。

直感に反する結論:filter / scaleX / transformOrigin はマスタータイムライン上では lint-clean である — プロパティのホワイトリストは scene-worker のプロンプトのみを制限し、index.html は制限しないためです。

.claude/skills/seam-craft/SKILL.md
`filter` / `scaleX` / `transformOrigin` are lint-clean on the master timeline (verified: `core/src/lint/rules/gsap.ts` has no per-property whitelist and scopes its checks to `data-composition-id` ranges; the x/y/scale/rotation/opacity whitelist is a _scene-worker_ prompt rule only — it does not bind index.html).
ここでの目的:不要なリファクタリングを招く誤解(マスタータイムライン上でも x/y/scale/rotation/opacity のみしか動かせないという誤認)を解消し、リント規則の実装確認に基づいた結論であることを示します。

結論に添えられた検証姿勢と実施日:プロトタイプレンダリングの実測(2026-05-31)により、マスタータイムラインのラッパー tween がシークおよびレンダリングされること(子コンポーネント自身の停止中タイムラインとの二重シークは発生せず、実行時に独立駆動)、延長されたラッパーがシーンiの最終フレームを固定すること、上位トラックの入場ラッパーが退場ラッパーと正しくオーバーラップしブレンドされることを確認済み。

.claude/skills/seam-craft/SKILL.md
Verified by prototype render (2026-05-31): the master-timeline wrapper tween is seeked and rendered (no double-seek with the sub-comp's own paused timeline — the runtime drives them independently), the extended wrapper holds scene _i_'s final frame, and the higher-track incoming wrapper composites over + blends with the outgoing one.
ここでの目的:これらの機構が机上の空論ではないことを示すタイムスタンプ付きの証拠を提示し、後続の開発者が結論の鮮度を判断できるようにします。

description に明記されたロードタイミング:マスタータイムライン / index.html の組み立て時、白フラッシュ発生時(特に暗いトーンの映像)、トランジションの不透明度の落ち込みが透ける理由を調査する際、およびオーバーラップするシーンラッパーのレンダリング側メカニズムを照合する際。

.claude/skills/seam-craft/SKILL.md
Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend.
ここでの目的:4つのトリガーシナリオを提示。前2つは「作業実行中」と「トラブルシューティング時」、後2つは「内部機構の理解」を目的としています。

2コア機能

01白フラッシュ防御:#root の不透明背景色という必須前提条件の提示と担当コンポーネントの明示
02インジェクター機構の解説(退場時間延長 / 入場開始前倒し / トラックピンポン / マスタータイムラインへの打点)
03gsap_template プレースホルダー規約(方向変位や squeeze 起点を含むトークン定義)
04マスタータイムラインのプロパティホワイトリスト境界の明確化(filter/scaleX/transformOrigin の正当性)
05Tier-B-ready の適用範囲定義(オーバーレイDOM注入やシーン連携を伴わない純粋な transform/opacity/filter)

3外部依存関係

KindDependency / Endpoint
package同仓组件依赖:assemble-index.mjs(负责给 #root 刷底)、injector / transition registry(gsap_template 的施加方)
reference框架源码坐标(作为论证依据被引用):core/src/runtime/init.ts、core/src/lint/rules/composition.ts、core/src/lint/rules/gsap.ts

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルール文書であり、スクリプト実行や外部影響は一切なし
監査ノート: 項目別検証(評価対象=スキル自身のディレクトリ):ディレクトリ内には SKILL.md ファイルが1点のみ存在。全文を通じてスクリプト、URL/エンドポイント、process.env や認証情報の読み取り、ディスク書き込みや子プロセス実行コマンドは皆無。サンドボックス回避、アンチオートメーション、危険なスイッチ類に関する文言も一切なし。「なぜ白フラッシュが起きるのか、インジェクターがどのようにラッパーを変更するのか、なぜトラックをピンポン処理しなければならないのか」を解説するレンダリング正確性ドキュメントであり、攻撃対象面は皆無であるため「緑(安全)」と判定。

5二重目の独立検証

  • [discrepancy] 文档引用的源码路径在本 pin 是否真实存在(core/src/runtime/init.ts:1393-1410、core/src/lint/rules/composition.ts、core/src/lint/rules/gsap.ts) — 三处在仓库根下均**不存在**(core/src/… 无此目录)。实际已迁到 packages/ 前缀:`packages/core/src/runtime/init.ts` 存在(1393 行附近确为时长/clip 解析相关代码,可见 derivedDuration 等分支,但行号与分支名不能逐字对应 `external-slot branch`);而 `packages/core/src/lint/rules/` 目录不存在,lint 现为 `packages/core/src/lint/index.ts` 单入口。结论:这三条源码坐标是写作时点的旧路径,在本 pin 已失效——不影响其结论(白闪机制、同轨非法),但照抄坐标去查源码会扑空。属上游文档与代码结构漂移,非本 skill 的行为风险。
  • [discrepancy] 「assemble-index.mjs now emits this」是否属实,且写法是否与文档一致 — 属实但表达不同。pin 内 assemble-index.mjs 共 4 份(product-launch-video / faceless-explainer / music-to-video / pr-to-video)。以 product-launch-video 版为准:它确实在 <head> 样式里输出 `#root { position: relative; … background: ${groundColor}; }`(groundColor 取自 frame.md 的 canvas 语义色),并在 html,body 上兜底 `background: #000`。而文档写的字面式样是 `var(--canvas-deep, var(--canvas, #000))`——全仓(*.ts/*.mjs/*.html)对 `canvas-deep` **零命中**,即该 CSS 变量名在当前代码里并不存在。行为目标(#root 不透明、不会白闪)一致,具体表达式已演进。
  • [ok] 「白闪」结论是否只是传言 — 文档给出机理(summed opacity < 1 的窗口 + 渲染器默认白页)与经验出处(observed on two Spotify runs before the fix),并指认三个会开窗的模板(cut-the-curve 中段、zoom-through 的 0.15 下限、普通 crossfade 的 power 曲线凹坑);后在 cut-the-curve/SKILL.md 里交叉印证(zoom-through 出场透明度确为 0.15)。机理自洽、可验,接受为文档声明。
  • [ok] 是否真的没有脚本/网络(green 档前提) — 目录全量仅 SKILL.md;全文 URL、curl、npx、node 调用、process.env 均零命中。文中出现的路径串(core/src/…)是文字引用,不是可执行指令。
  • [ok] 「不含 per-transition catalog」的自述是否属实 — SKILL.md 正文只谈前置条件与机序,未列任何具体转场的参数(唯一出现 cut-the-curve/zoom-through 之处是在解释「谁会开出不透明度和 <1 的窗」);转场目录确实不在本目录内。

6結論

  • 「ダークトーン映像の接合部白フラッシュ」という感覚的な不具合を、実効的な前提条件(#root の背景塗り)に落とし込み、責任コンポーネントを特定
  • 4ステップの機構を通じてオーバーラップラッパーの合成方法を解説し、「なぜ同トラックでの重複が不可なのか」「なぜ上位トラックが前面になるのか」を論理的に説明
  • マスタータイムライン上での filter/scaleX/transformOrigin が有効であることを示し、scene-worker 向けホワイトリストとの混同という陥りやすいリントの誤認を解消
  • transition registry との境界を明示的に切り分け、同一ルールの二重管理を防止
  • 検証日と検証手法(プロトタイプレンダリング実測)を付記し、有効性の判断基準を提供
  • 最適な用途: 推奨用途:HyperFrames のマスタータイムライン / index.html 組み立て時の事前チェックリスト、ダークトーン映像のシームにおける白フラッシュや「トランジションの不透明度の窪みが透ける現象」のトラブルシューティング、インジェクターによるラッパーのオーバーラップ・トラックピンポン・gsap_template 注入メカニズムの理解、filter/scaleX/transformOrigin がマスタータイムライン上でリントエラーにならないことの確認。cut-the-curve(選定編)との併読を推奨。
    不向きな用途: 非推奨用途:① 特定トランジションのパラメータや実装コードの検索(transition registry および cut-the-curve の examples を参照);② そのまま実行可能な検査ツールを求めるケース(本スキルにスクリプトは含まれません);③ オーバーレイ系やシェーダートランジションを使用するプロジェクト(本ドクトリンの明確な対象外);④ ドキュメント内のパスでフレームワークのソースコードをそのまま追跡しようとする場合(パスは packages/ プレフィックスへ移行しているため手動読み替えが必要)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload seam-craft.tar.gz
    sha256: b3f716c34090b9a1…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.