Cuboid Carousel（直方体カルーセル）
丸みを帯び、面取りされた直方体がカードコンテンツを乗せて右から1つの固まりとして飛来し、各直方体が回転しながら進行し、ハイライト表示で減速・停止した後、左に退出します。間隔は直方体の寸法と最大到達可能X半幅から計算されるため、直方体同士が重なることはありません。40の変数が元のDialKitスキーマ（ジオメトリ、マテリアル、ライト、シャドウ、背景、カメラ、各セグメントの持続時間とイージング）を保持しています。カードは組み込みリストまたはJSON変数から取得します。
コンポジションID: cuboid-carousel。持続時間 6.666666666666667 秒（30 fps）、1920×1080。
ファイル
cuboid-carousel.html(38 KB)assets/Three-LICENSE.txt(1 KB)assets/addons/environments/RoomEnvironment.js(5 KB)assets/addons/utils/BufferGeometryUtils.js(36 KB)assets/cuboid-motion.js(593 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
インストール
npx hyperframes add cuboid-carousel でインストールします。デフォルトでは上記ファイルは compositions/cuboid-carousel/ 以下に配置されます。その後、ホストの index.html からブロックをマウントします。
<div
data-composition-id="cuboid-carousel"
data-composition-src="compositions/cuboid-carousel/cuboid-carousel.html"
data-start="0"
data-duration="6.666666666666667"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
カスタム値を指定してレンダリングするには、コンポジションファイルを直接ターゲットにします。
npx --yes [email protected] render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
変数
実行時に window.__hyperframes.getVariables() で読み取られます。コンポジションルートに data-composition-variables（シングルクォート属性、プレーンJSON）として宣言されます。
| id | 型 | デフォルト | ラベル / 範囲 |
|---|---|---|---|
cardsJson | string | "" | コンテンツ · カードJSON（オプション、ソース内のCARDS参照） |
heroCard | number | 4 | コンテンツ · ハイライトカード（1基点）1–12 ステップ1 |
count | number | 8 | コンテンツ · 繰り返しカード数 1–12 ステップ1 |
gap | number | 0.01 | レイアウト · カブーブ間の追加間隔 0–1.5 ステップ0.005 |
cuboidWidth | number | 1.7 | カブーブ · 幅 0.3–5 ステップ0.01 |
cuboidHeight | number | 2.4 | カブーブ · 高さ 0.3–6 ステップ0.01 |
cuboidDepth | number | 0.14 | カブーブ · 厚さ（奥行き） 0.02–2 ステップ0.01 |
cornerRadius | number | 0.105 | カブーブ · 角丸半径 0–0.6 ステップ0.005 |
bevelSize | number | 0.03 | カブーブ · ベベルサイズ（エッジ面取り） 0–0.3 ステップ0.001 |
bevelThickness | number | 0.04 | カブーブ · ベベル厚さ 0–0.3 ステップ0.001 |
smoothness | number | 32 | カブーブ · 滑らかさ（セグメント数） 1–32 ステップ1 |
bodyColor | color | "#242424" | カブーブ · ボディ色 |
roughness | number | 0.6 | カブーブ · 粗さ 0–1 ステップ0.01 |
metalness | number | 0.4 | カブーブ · 金属感 0–1 ステップ0.01 |
heroScale | number | 1 | ハイライト · 単独時のスケール 1–1.6 ステップ0.01 |
heroFillIntensity | number | 0.55 | ハイライト · 正面ライト強度 0–2 ステップ0.05 |
heroExitX | number | 288 | ハイライト · 退出X回転角度（度） -720–720 ステップ1 |
heroExitY | number | -234 | ハイライト · 退出Y回転角度（度） -720–720 ステップ1 |
heroExitZ | number | 198 | ハイライト · 退出Z回転角度（度） -720–720 ステップ1 |
ambientIntensity | number | 0.35 | ライト · 環境光強度 0–4 ステップ0.01 |
ambientColor | color | "#ffffff" | ライト · 環境光色 |
topIntensity | number | 3.1 | ライト · 上部ライトリグ強度 0–12 ステップ0.05 |
topColor | color | "#ffffff" | ライト · 上部ライトリグ色 |
bottomIntensity | number | 2.15 | ライト · 下部ライトリグ強度 0–12 ステップ0.05 |
bottomColor | color | "#ffcaad" | ライト · 下部ライトリグ色 |
keyIntensity | number | 5 | ライト · キーライトリグ強度 0–12 ステップ0.05 |
keyColor | color | "#ffe9d6" | ライト · キーライトリグ色 |
shadowRadius | number | 44.5 | シャドウ · マップサイズ2048時のぼかし 0–50 ステップ0.5 |
shadowMapSize | number | 2048 | シャドウ · マップサイズ 512–4096 ステップ256 |
backdrop | color | "#0b0d13" | 背景 · 色 |
cameraFov | number | 11 | カメラ · 初期画角 10–90 ステップ0.5 |
cameraX | number | -1.65 | カメラ · 初期X座標 -20–20 ステップ0.05 |
cameraY | number | 8.5 | カメラ · 初期Y座標 -20–20 ステップ0.05 |
cameraZ | number | -8.508708 | カメラ · 初期Z座標（距離） -20–50 ステップ0.1 |
cameraSettleFrame | number | 70 | カメラ · 安定フレーム（30 fps） 20–90 ステップ1 |
handheldStrength | number | 1 | カメラ · 手持ち風ブレ強度 0–1 ステップ0.05 |
cameraTargetFov | number | 34 | カメラターゲット · 画角 10–90 ステップ0.5 |
cameraTargetX | number | -7.25 | カメラターゲット · X座標 -20–20 ステップ0.05 |
cameraTargetY | number | 1.15 | カメラターゲット · Y座標 -20–20 ステップ0.05 |
cameraTargetZ | number | 6.2 | カメラターゲット · Z座標 2–50 ステップ0.1 |
ランタイム契約
window.__timelines["cuboid-carousel"]に登録された一時停止状態のGSAPタイムラインが1つ存在します。hf-seekCustomEvent で再同期します。すべてのフレームは時間の閉形式関数です（シード付きPRNGのみ、rAFループなし、Date.nowなし）。- レンダラー: WebGL、GSAP、Canvas 2D、PMREM、シャドウマップ。1インスタンスあたり約350 MBのメモリを見積もり、一度に1つだけ実行します。
- 外部ランタイム依存関係:
./assets/three.module.min.js、./assets/addons/。 - Google FontsからのWebフォント: Inter。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォート属性とプレーンな"JSON を維持してください。Studioのデザインパネルから保存しないでください。- 静的マークアップに
<canvas>を配置しないでください。実行時に作成します。 - すべての視覚状態を t の関数として維持してください。シーク安全性がブロックをレンダリング可能にする要件です。