1仕組みと動作原理
生成カット:テクスチャが適用された樹冠全体が浅い被写界深度で画面を横切り、左右に「開いて」1行目の見出しを露出させます。続いて深度を上げた第2陣の葉が2行目の見出しを運び込み、最終的に数枚の葉が文字の上に残って微風に揺れ続けます。
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.
公式「ブロック」としての配布:`npx hyperframes add canopy-part-title` を1回実行するだけで、registry-item の files→target マッピングに従いコンポジションとテクスチャが compositions/canopy-part-title/ に配置され、ホスト側の index.html が data-composition-src を介してマウントします。
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"
パラメータインターフェースの完全外部化:11個の変数がコンポジションのルート要素の data-composition-variables(シングルクォート属性+純粋なJSON)に宣言され、実行時に window.__hyperframes.getVariables() 経由で取得されます。読み込みエラーは try/catch で処理されてスクリプト内のデフォルト値にフォールバックするため、構文不良な宣言によって画面がブランクになるのを防ぎます。
if (window.__hyperframes && window.__hyperframes.getVariables) V = window.__hyperframes.getVariables() || {}; } catch (e) { /* corrupt declarations must not blank the composition */ }
決定論的規約によるレンダリング再現性の保証:paused 状態の GSAP タイムラインが window.__timelines["canopy-part-title"] に登録され、シーク時には hf-seek カスタムイベントをリッスンして再同期します。全フレームが時間の閉じた関数として記述されています(シード付きPRNGのみ使用、rAFループ不使用、Date.now不使用)。
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)を使用することで、同一時刻には常に完全に同一の画面が描画されることを保証します。
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 の変数パーサーが失敗するため)。
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.
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI(add / render) |
| network | jsDelivr CDN:GSAP 3.14.2(产物期浏览器执行的脚本) |
| network | jsDelivr CDN:three.js 0.170.0(importmap + 三个 postprocessing addon) |
| network | Google Fonts(产物期浏览器拉取字体;Gelasio 为自带示例) |
| package | three.js 0.170.0 + GSAP 3.14.2(浏览器端运行,非本地 node 依赖) |
4推奨統制措置と判定根拠
- scripts/: ローカルスクリプトまたはコマンドの実行: canopy-part-title.html —— レンダラー/ブラウザによって実行されるコンポジションスクリプト(importmap により three 0.170.0 を取得)
- 网络端点: 外部ネットワークアクセスの宣言: cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js(生成物実行フェーズ:ブラウザによる実行)
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結論
92b16eff05db15f7…