cuboid-carousel

立方体カルーセル

カードコンテンツを載せた角を丸めた面取り立方体が、ひとまとまりの剛体グループとして右から飛び込みます。立方体ごとに回転をずらしながら進み、減速してヒーロー表示で静止した後、左へ退出します。間隔は立方体の寸法と到達可能な最大 X 半径から算出されるため、立方体が重なることはありません。40 個の変数には、ジオメトリ、マテリアル、ライト、シャドウ、背景、カメラ、各セグメントのすべての時間とイージングを含む、元の DialKit スキーマが格納されています。カードは組み込みリストまたは JSON 変数から取得できます。

コンポジション ID：cuboid-carousel。30 fps、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	type	default	label / range
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-seek CustomEvent で再同期します。各フレームは時間の閉形式の関数です（シード付き PRNG のみを使用し、rAF ループや Date.now は使用しません）。
• レンダラー：WebGL、GSAP、Canvas 2D、PMREM、シャドウマップ。実行中のインスタンス 1 つあたり約 350 MB を使用します。一度に 1 つだけ実行してください。
• 外部ランタイム依存関係：./assets/three.module.min.js、./assets/addons/。
• Google Fonts のウェブフォント：Inter。

編集ルール（ソースプロジェクトより）

1. data-composition-variables は、JSON に通常の " を使用した単一引用符の属性として維持してください。Studio の Design パネルから保存しないでください。
2. 静的マークアップに <canvas> を置かないでください。実行時に作成してください。
3. すべてのビジュアル状態を t の関数として維持してください。シーク時の安全性によって、このブロックをレンダリングできます。