Cuboid Carousel（長方體輪播）
帶有圓角斜角的長方體承載著卡片內容，以一個剛性群體從右側飛入，伴隨著每個長方體的旋轉交錯效果，減速到英雄卡片停留位置，然後從左側退出。間距是根據長方體尺寸和最大可達到的 X 半徑自動計算的，因此長方體永遠不會重疊。四十個變數完整承載了原始的 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 |
執行時期合約
- 一個暫停的 GSAP 時間軸，註冊為
window.__timelines["cuboid-carousel"]。 - 在
hf-seek自訂事件觸發時重新同步；每個影格都是時間的封閉形式函數（僅使用種子偽隨機數生成器，沒有 rAF 循環，沒有 Date.now）。 - 渲染器：WebGL、GSAP、Canvas 2D、PMREM、陰影貼圖。每個實例約需 350 MB 記憶體；建議一次只執行一個。
- 外部執行時期依賴：
./assets/three.module.min.js，./assets/addons/。 - 來自 Google Fonts 的網頁字型：Inter。
編輯規則（來自原始專案）
- 保持
data-composition-variables為使用單引號包裹的屬性，並使用純"JSON 格式。切勿透過 Studio 的設計面板儲存它。 - 不要在靜態標記中包含
<canvas>；應在執行時期動態建立。 - 保持每個視覺狀態為 t 的函數；時間跳轉安全性是此區塊可渲染的關鍵。