長方體輪播
帶有圓角與斜角裝飾的長方體承載卡片內容，以剛性群組方式從右側飛入，飛行時每個長方體產生錯開的旋轉，接著減速並停留在英雄卡片位置，最後向左側離開。間距是根據長方體尺寸與最大可觸及的 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 | 字串 | "" | 內容 · 卡片 JSON（可選，請參閱原始碼中的 CARDS） |
heroCard | 數字 | 4 | 內容 · 英雄卡片（從 1 開始）1–12 步長 1 |
count | 數字 | 8 | 內容 · 重複卡片數量 1–12 步長 1 |
gap | 數字 | 0.01 | 佈局 · 長方體之間的額外間距 0–1.5 步長 0.005 |
cuboidWidth | 數字 | 1.7 | 長方體 · 寬度 0.3–5 步長 0.01 |
cuboidHeight | 數字 | 2.4 | 長方體 · 高度 0.3–6 步長 0.01 |
cuboidDepth | 數字 | 0.14 | 長方體 · 厚度（深度）0.02–2 步長 0.01 |
cornerRadius | 數字 | 0.105 | 長方體 · 圓角半徑 0–0.6 步長 0.005 |
bevelSize | 數字 | 0.03 | 長方體 · 斜角大小（邊緣倒角）0–0.3 步長 0.001 |
bevelThickness | 數字 | 0.04 | 長方體 · 斜角厚度 0–0.3 步長 0.001 |
smoothness | 數字 | 32 | 長方體 · 平滑度（分段數）1–32 步長 1 |
bodyColor | 顏色 | "#242424" | 長方體 · 本體顏色 |
roughness | 數字 | 0.6 | 長方體 · 粗糙度 0–1 步長 0.01 |
metalness | 數字 | 0.4 | 長方體 · 金屬感 0–1 步長 0.01 |
heroScale | 數字 | 1 | 英雄 · 獨立縮放 1–1.6 步長 0.01 |
heroFillIntensity | 數字 | 0.55 | 英雄 · 面部光強度 0–2 步長 0.05 |
heroExitX | 數字 | 288 | 英雄 · 退出 X 旋轉角度 -720–720 步長 1 |
heroExitY | 數字 | -234 | 英雄 · 退出 Y 旋轉角度 -720–720 步長 1 |
heroExitZ | 數字 | 198 | 英雄 · 退出 Z 旋轉角度 -720–720 步長 1 |
ambientIntensity | 數字 | 0.35 | 燈光 · 環境光強度 0–4 步長 0.01 |
ambientColor | 顏色 | "#ffffff" | 燈光 · 環境光顏色 |
topIntensity | 數字 | 3.1 | 燈光 · 上方燈組強度 0–12 步長 0.05 |
topColor | 顏色 | "#ffffff" | 燈光 · 上方燈組顏色 |
bottomIntensity | 數字 | 2.15 | 燈光 · 下方燈組強度 0–12 步長 0.05 |
bottomColor | 顏色 | "#ffcaad" | 燈光 · 下方燈組顏色 |
keyIntensity | 數字 | 5 | 燈光 · 主燈組強度 0–12 步長 0.05 |
keyColor | 顏色 | "#ffe9d6" | 燈光 · 主燈組顏色 |
shadowRadius | 數字 | 44.5 | 陰影 · 柔和度（貼圖尺寸 2048）0–50 步長 0.5 |
shadowMapSize | 數字 | 2048 | 陰影 · 貼圖尺寸 512–4096 步長 256 |
backdrop | 顏色 | "#0b0d13" | 背景 · 顏色 |
cameraFov | 數字 | 11 | 攝影機 · 初始視野 10–90 步長 0.5 |
cameraX | 數字 | -1.65 | 攝影機 · 初始 X 座標 -20–20 步長 0.05 |
cameraY | 數字 | 8.5 | 攝影機 · 初始 Y 座標 -20–20 步長 0.05 |
cameraZ | 數字 | -8.508708 | 攝影機 · 初始 Z 座標（距離）-20–50 步長 0.1 |
cameraSettleFrame | 數字 | 70 | 攝影機 · 穩定畫面（30 fps）20–90 步長 1 |
handheldStrength | 數字 | 1 | 攝影機 · 手持穩定強度 0–1 步長 0.05 |
cameraTargetFov | 數字 | 34 | 攝影機目標 · 視野 10–90 步長 0.5 |
cameraTargetX | 數字 | -7.25 | 攝影機目標 · X 座標 -20–20 步長 0.05 |
cameraTargetY | 數字 | 1.15 | 攝影機目標 · Y 座標 -20–20 步長 0.05 |
cameraTargetZ | 數字 | 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 的函數；seek 安全性是讓此區塊可渲染的關鍵。