长方体轮播
带圆角倒角的长方体承载卡片内容，作为一个刚体组从右侧飞入，每个长方体带有独立的旋转偏移，巡航后减速至主角停留，最后从左侧退出。间距由长方体尺寸和最大可达到的 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自定义事件重新同步；每一帧都是时间的封闭形式函数（仅使用种子 PRNG，没有 rAF 循环，没有 Date.now）。 - 渲染器：WebGL、GSAP、Canvas 2D、PMREM、阴影贴图。每个活动实例预算约 350 MB；建议一次运行一个实例。
- 外部运行时依赖：
./assets/three.module.min.js、./assets/addons/。 - 来自 Google Fonts 的 Web 字体：Inter。
编辑规则（源自源项目）
- 保持
data-composition-variables为单引号属性，其中包含纯"JSON。切勿通过 Studio 的设计面板保存它。 - 不要在静态标记中放置
<canvas>；在运行时创建它。 - 保持每个视觉状态为 t 的函数；seek 安全性是模块可渲染的关键。