直方体カルーセル (Cuboid Carousel)
丸みを帯びた面取り直方体がカードコンテンツを乗せて、ひとつの剛体グループとして右から飛来し、直方体ごとに回転のずれをもたせて巡航、ヒーロー位置で減速・停止し、その後左へ退出します。間隔は直方体の寸法と、到達可能な最大X方向の半分の広がりから計算されるため、直方体同士が重なることはありません。40個の変数がDialKitの元のスキーマ（ジオメトリ、マテリアル、ライト、シャドウ、背景、カメラ、および各セグメントの時間とイージング）を保持します。カードは組み込みリストまたはJSON変数から取得します。
コンポジションID: cuboid-carousel。30fps、1920×1080における再生時間は6.666666666666667秒です。
ファイル
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 | カメラ · セトルフレーム（30fps） 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 |
実行時契約
- 一時停止中のGSAPタイムラインが
window.__timelines["cuboid-carousel"]として登録されます。 hf-seekカスタムイベントで再同期します。すべてのフレームは時間の閉じた関数です（シード付きPRNGのみ使用、rAFループなし、Date.now不使用）。- レンダラー: WebGL、GSAP、Canvas 2D、PMREM、シャドウマップ。1インスタンスあたりのメモリ予算は約350MB。一度に1つだけ実行してください。
- 外部ランタイム依存関係:
./assets/three.module.min.js、./assets/addons/。 - Webフォント（Google Fonts）: Inter。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォートで囲み、値はプレーンな"JSONとすること。Studioのデザインパネルから保存しないでください。- 静的なマークアップに
<canvas>を配置せず、実行時に生成してください。 - すべての視覚状態を t（時間）の関数として保持すること。シーク安全性こそがブロックをレンダリング可能にする鍵です。