ワイヤーフレームポータルタイトル
押し出しワイヤーフレーム文字は、バンドルされたGeistフォントをTTFローダーとポリゴンオフセットで構築し、カオス値が可変のポータルバーストを通じて出現します。第二のビートで文字を置換フレーズに交換し、単語単位の折り返しと自動フォントサイズ調整、調整可能なイージングカーブによる段階的表示、セトルグリッチ、オプションの深度フォグを適用します。
コンポジションID: wireframe-portal-title。持続時間8秒、30fps、1920×1080。
ファイル
wireframe-portal-title.html(63 KB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)
インストール
npx hyperframes add wireframe-portal-titleでインストールします。デフォルトでは上記のファイルはcompositions/wireframe-portal-title/配下に配置されます。その後、ホストのindex.htmlにブロックをマウントします:
<div
data-composition-id="wireframe-portal-title"
data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
カスタム値でレンダリングするには、コンポジションファイルを直接指定します:
npx --yes [email protected] render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'
変数
実行時にwindow.__hyperframes.getVariables()で読み取られます。コンポジションルートのdata-composition-variables属性（シングルクォート属性、プレーンJSON）として宣言されています。
| id | type | default | ラベル / 範囲 |
|---|---|---|---|
title | string | "BREAKTHROUGH" | タイトル最大18文字 |
replacementPhrase | string | "Lets do this sir!" | 3D置換フレーズ（自動レイアウト） |
phraseDuration | number | 1.85 | フレーズ遷移の持続時間（秒）0.65–2.9 ステップ0.05 |
phraseEasing | number | 8 | 遷移のイージング（1なめらか – 8スナップ）1–8 ステップ0.25 |
settleGlitch | number | 0.2 | 文字のセトルグリッチ強度 0–4 ステップ0.05 |
depthFog | boolean | true | 深度フォグ（初期フェードは常時オン） |
subtitle | string | "HYPERFRAMES PORTAL TITLE" | サブタイトル最大48文字 |
accent | color | "#F5C518" | アクセントカラー |
burstChaos | number | 1 | バーストカオス（0-2）0–2 ステップ0.01 |
ランタイム契約
- 一時停止可能なGSAPタイムラインとして
window.__timelines["wireframe-portal-title"]に登録されます。 hf-seekカスタムイベントで再同期します。すべてのフレームは時間のクローズドフォーム関数です（シード付きPRNGのみ、rAFループなし、Date.nowなし）。- レンダラー: three.js 0.181.2、GSAP 3.14.2、Canvas 2D、GLSLシェーダー、ポストプロセッシング、シード付きPRNG、Clipper。ライブインスタンスあたり約350 MBの予算。一度に1つ実行してください。
- 外部ランタイム依存:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/clipper.js、https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/。 - ローカルフォント: assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォート属性で、プレーンな"JSONを維持してください。Studioのデザインパネルで保存しないでください。- 静的マークアップに
<canvas>を配置しないでください。実行時に生成してください。 - すべての視覚状態をtの関数として維持してください。シークセーフ性こそがブロックをレンダリング可能にするものです。