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

canopy-part-title

葉が画面を吹き抜け、左右に分かれてヘッドラインが現れます。HyperFramesブロック、1920×1080、12秒、11変数。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信Dual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 44283License Apache-2.0(仓库根 LICENSE = Apache License Version 2.0;块内随带第三方许可文本:three.js MIT、GSAP 标准许可、Geist/Archivo/Cormorant Garamond OFL 等)Commit d2f0bc7f34
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

生成カット:テクスチャが適用された樹冠全体が浅い被写界深度で画面を横切り、左右に「開いて」1行目の見出しを露出させます。続いて深度を上げた第2陣の葉が2行目の見出しを運び込み、最終的に数枚の葉が文字の上に残って微風に揺れ続けます。

registry/blocks/canopy-part-title/SKILL.md
A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline; a second, depth-lifted batch carries the second headline past the camera. A handful of leaves stay behind on the type and keep a light breeze.
処理内容:「見出しの出現」を物理的な遮蔽物の分離(葉=マスク)として表現し、2段見出しのリズム(タイトルカード、12秒)をあらかじめ設定しています。

公式「ブロック」としての配布:`npx hyperframes add canopy-part-title` を1回実行するだけで、registry-item の files→target マッピングに従いコンポジションとテクスチャが compositions/canopy-part-title/ に配置され、ホスト側の index.html が data-composition-src を介してマウントします。

registry/blocks/canopy-part-title/SKILL.md
Install with `npx hyperframes add canopy-part-title`; by default the files above land under `compositions/canopy-part-title/`. Then mount the block from the host `index.html`: … data-composition-id="canopy-part-title" … data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
処理内容:ブロックは「テンプレートテキスト」ではなくインストール可能なユニットです。インストーラが registry-item.json を読み込んで配置先パスを決定し、SKILL.md はエージェントに対してマウント方法と調整方法の指示のみを担当します。

パラメータインターフェースの完全外部化:11個の変数がコンポジションのルート要素の data-composition-variables(シングルクォート属性+純粋なJSON)に宣言され、実行時に window.__hyperframes.getVariables() 経由で取得されます。読み込みエラーは try/catch で処理されてスクリプト内のデフォルト値にフォールバックするため、構文不良な宣言によって画面がブランクになるのを防ぎます。

registry/blocks/canopy-part-title/canopy-part-title.html
if (window.__hyperframes && window.__hyperframes.getVariables) V = window.__hyperframes.getVariables() || {}; } catch (e) { /* corrupt declarations must not blank the composition */ }
処理内容:宣言的変数は HF Studio の調整ノブとしての規約です。防御的な読み込みを行うことで、属性パースの問題に起因してレンダリングパイプラインが空フレームを出力するのを防止します。

決定論的規約によるレンダリング再現性の保証:paused 状態の GSAP タイムラインが window.__timelines["canopy-part-title"] に登録され、シーク時には hf-seek カスタムイベントをリッスンして再同期します。全フレームが時間の閉じた関数として記述されています(シード付きPRNGのみ使用、rAFループ不使用、Date.now不使用)。

registry/blocks/canopy-part-title/SKILL.md
One paused GSAP timeline registered as `window.__timelines["canopy-part-title"]`. … Re-syncs on the `hf-seek` CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
処理内容:ヘッドレスレンダラーは連続再生ではなくフレーム単位でシークを行うため、実クロックや累積積分器に依存する実装はレンダリング再現性を損なう要因となります。

ランダム性をシード付きPRNGへ完全置換:レイアウトとメインタイムラインのスクリプトは Three モジュールより前に同期実行され、コード上に「Zero Math.random」と明記されています。葉のバッチごとに独立した定数シード(mulberry32)を使用することで、同一時刻には常に完全に同一の画面が描画されることを保証します。

registry/blocks/canopy-part-title/canopy-part-title.html
Seeded layout + master timeline. Runs synchronously before the Three module so the timeline exists the moment the page is scriptable. Zero Math.random. … var rand = mulberry32(0x6a756e67);
処理内容:「自然なランダム感」を固定シードの決定論的分布に変換することで、見た目の有機的ランダム性を保ちながらレンダリングの再現性を担保しています。

レンダリングスタックは three.js 0.170.0(jsdelivr importmap)+ EffectComposer/BokehPass による被写界深度 + シャドウです。SKILL.md には単一インスタンスあたり約 350 MB、単一実行が明記されており、canvas は実行時に動的生成することが義務付けられています(静的マークアップ内に <canvas> を記述すると Studio の変数パーサーが失敗するため)。

registry/blocks/canopy-part-title/SKILL.md
Renderer: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Post-processing, Seeded PRNG, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
処理内容:リソースバジェットを SKILL.md に直接明記しています。registry ブロックとしては珍しい明確なメモリ制約を提示し、オーケストレーション時に複数の重いブロックを同一ページに並列配置しないよう注意喚起しています。

2コア機能

01樹冠分離型デュアルタイトルオープニングカット(1920×1080、12秒、11変数)
02葉の密度および残留微風感の調整:leafCount 170(40–320)、stayCount 5(0–20)、sweepSpeed、retainedBreeze
03ポストプロセス被写界深度およびシャドウ:3つの three アドオン(EffectComposer + RenderPass + BokehPass)を直接インポート
04実行時のプロシージャルテクスチャ生成:葉のカラー/法線キャンバスとダストスプライトは Canvas 2D で動的描画され、同梱される2枚の webp 以外の外部アセットへの依存を排除
05見出しフォントの変更対応:デフォルトは Helvetica。実行時にフォント名を encodeURIComponent して Google Fonts の URL に動的挿入してロード(内包サンプル:Gelasio)
06Studio なしでの単独レンダリング:コンポジションファイルに対して直接レンダリングを実行し、変数を上書き可能
07canvas は常に実行時に動的作成(静的 <canvas> マークアップに対する Studio 変数パーサーのエラーを回避)し、単一インスタンスのメモリ解放用にスクリプト内で window.__cptInstance.dispose() を公開

3外部依存関係

KindDependency / Endpoint
cliHyperFrames 官方 CLI(add / render)
networkjsDelivr CDN:GSAP 3.14.2(产物期浏览器执行的脚本)
networkjsDelivr CDN:three.js 0.170.0(importmap + 三个 postprocessing addon)
networkGoogle Fonts(产物期浏览器拉取字体;Gelasio 为自带示例)
packagethree.js 0.170.0 + GSAP 3.14.2(浏览器端运行,非本地 node 依赖)

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

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: canopy-part-title.html —— レンダラー/ブラウザによって実行されるコンポジションスクリプト(importmap により three 0.170.0 を取得)
  • 网络端点: 外部ネットワークアクセスの宣言: cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js(生成物実行フェーズ:ブラウザによる実行)
監査ノート: 評価対象=本ブロックディレクトリ(SKILL.md + コンポジション HTML + 2枚の webp + registry-item.json):認証情報や環境変数の読み取りなし、シェル実行や外部データ送信スクリプトなし、ローカルディスクへの書き込みコードなし。唯一のネットワーク接点は、生成物フェーズにおいてブラウザが jsdelivr から gsap/three、Google Fonts から Gelasio を取得する点のみです。パラダイム付録Aの第2条「生成物フェーズの参照は評価対象外」に基づき、エンドポイントの記載にとどめています。インストールとレンダリングは公式 CLI エコシステム(npx hyperframes add/render)に準拠しています。したがって「blue」と判定します。注意:three/gsap が CDN 経由であるため、制限されたネットワーク環境やオフラインレンダリングを行う場合は、事前にキャッシュするかパッケージ同梱のローカルコピーに差し替える必要があります。

5二重目の独立検証

  • [ok] 变量数与声明一致性(frontmatter 自称 11 variables) — 脚本实测:SKILL.md 变量表 11 行、composition 的 data-composition-variables 解析出 11 项、frontmatter 写 11 —— 三者一致。
  • [ok] 「无 Math.random / Date.now / rAF」声称 — 对 html 全文 grep:Math.random、Date.now、performance.now、requestAnimationFrame 零命中;注释逐字写着 Zero Math.random,随机全部来自 mulberry32 常数种子(主批次 0x6a756e67、抬升批 0x6c696674)。
  • [ok] 外部依赖单真实性 — html 第 16 行 gsap 脚本、第 333–340 行 importmap 与三个 postprocessing import、第 10–13 行 Google Fonts link 均逐字命中;SKILL.md 的 External runtime dependencies 行与之一致。
  • [ok] 凭证/密钥接触面 — 对 SKILL.md / html / registry-item.json 扫描 process.env、secret、token、api_key、cookie:零命中。
  • [ok] registry-item 文件清单 vs 盘上文件 — 声明 4 个文件全部存在,且无远端 url 兜底(与本块不依赖远端二进制一致)。
  • [ok] 时长与尺寸一致性 — registry-item duration 12 / dimensions 1920×1080 与 html data-duration="12"、SKILL.md 标题行 12s 一致。

6結論

  • 単一コマンドで完結したカットを生成可能
  • コード変更不要で広範なパラメータカバレッジを提供
  • 決定論的再現性を担保する厳格な規約
  • リソース制約の明確な仕様化
  • 最適な用途: 「自然/有機的」なオープニングやチャプター用タイトルカードを必要とし、尺長が約12秒、変数から直接コピーや密度の差し替えが可能なユースケース(ブランド映像、製品ビデオのオープニング、SNS向けタイトルカードなど)。
    不向きな用途: ナレーションやマルチシーン構成を必要とする長尺動画(general-video などのワークフローが適しています);three/gsap のローカルコピーを用意せずにオフラインレンダリングを厳密に要求するパイプライン;極めて精密なタイポグラフィ調整が必要な場合(デフォルトは Helvetica、フォントは事前準備またはネットワーク接続が必要)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload canopy-part-title.tar.gz
    sha256: 92b16eff05db15f7…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d2f0bc7f34.