オービットカード
中央に配置された1枚のフィーチャーカードは、円形の切り抜きで点球をフレーミングします。カードは右から進入し（0.25～1.80秒）、微かな揺れと奥行きの変化を伴いながらホールドされ、球体の中心を軸に1回転（4.97～5.97秒の間でスムーズステップ補間）、左へ退出します（7.35～8.55秒）。カメラパスとカードのFカーブは、承認済みBlenderリグから30fpsでエクスポートされ補間されます。球体は独自の移動と一定の回転を維持します。タイトル、説明文、アクセントカラー、公転角度は変数として設定可能です。180度や720度でもキーを変更せずに動作します。
コンポジションID: orbit-card。持続時間10秒（30fps）、1920×1080。
ファイル
orbit-card.html(3 KB)assets/Archivo-LICENSE.txt(4 KB)assets/Three-LICENSE.txt(1 KB)assets/archivo-regular.ttf(108 KB)assets/archivo-semibold.ttf(109 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/orbit-motion.js(59 KB)assets/orbit-scene.js(8 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
インストール
npx hyperframes add orbit-card でインストールします。デフォルトでは上記ファイルは compositions/orbit-card/ 以下に配置されます。次に、ホストの index.html からブロックをマウントします：
<div
data-composition-id="orbit-card"
data-composition-src="compositions/orbit-card/orbit-card.html"
data-start="0"
data-duration="10"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
コンポジションファイルを直接指定してカスタム値でレンダリングする場合は次のコマンドを使用します：
npx --yes [email protected] render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'
変数
実行時に window.__hyperframes.getVariables() で読み取ります。コンポジションルートの data-composition-variables 属性で宣言されます（シングルクォート属性、プレーンJSON）。
| id | 型 | デフォルト | ラベル / 範囲 |
|---|---|---|---|
feature1Title | 文字列 | "Always in sync" | カードタイトル最大28文字 |
feature1Desc | 文字列 | "Changes reach every screen the moment they happen." | カード説明文最大110文字 |
feature1Accent | 色 | "#4cc9ff" | カードアクセントカラー |
cardOrbitDegrees | 数値 | 360 | カード公転角度 -36000～36000 ステップ1 |
実行時コントラクト
window.__timelines["orbit-card"]として登録された一時停止済みのGSAPタイムラインが1つ。hf-seekカスタムイベントで再同期。すべてのフレームは時間の閉形式関数（シード付きPRNGのみ、rAFループなし、Date.nowなし）。- レンダラー: GSAP。
- 外部ランタイム依存: なし（ローカルで配信）。
- ローカルフォント: assets/archivo-regular.ttf、assets/archivo-semibold.ttf。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォート属性にプレーン"JSON として保持すること。Studioのデザインパネルから保存しない。<canvas>を静的マークアップに配置しない。実行時に作成すること。- すべてのビジュアル状態を t の関数として保持すること。シーク安全性によりブロックのレンダリングが可能になる。