长方体轮播
圆角倒角长方体承载着卡片内容，作为一个刚性群体从右侧飞入，巡航时每个长方体独立旋转并错开相位，减速至英雄卡片暂停展示，然后向左退出。间距由长方体尺寸和最大可达 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 | 字符串 | "" | 内容 · 卡片 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 的函数；搜索安全是使模块可渲染的关键。