cuboid-carousel

Cuboid Carousel

圆角倒角长方体承载着卡片内容，作为一个刚性整体从右侧飞入，以每个长方体旋转错开的方式巡航，减速后停留在主视觉位置，随后从左侧离开。间距根据长方体尺寸和可达的最大 X 轴半范围计算，因此长方体绝不会重叠。40 个变量沿用原始 DialKit 架构：几何体、材质、灯光、阴影、背景、摄像机，以及每个片段的持续时间和缓动。卡片来自内置列表或 JSON 变量。

组合 ID：cuboid-carousel。时长 6.666666666666667 s，帧率为 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	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

运行时契约

• 一个已暂停的 GSAP 时间轴，注册在 window.__timelines["cuboid-carousel"]。
• 在 hf-seek CustomEvent 上重新同步；每一帧都是时间的闭式函数（仅使用带种子的 PRNG，不使用 rAF 循环或 Date.now）。
• 渲染器：WebGL、GSAP、Canvas 2D、PMREM、阴影贴图。每个运行实例的预算约为 350 MB；一次只运行一个实例。
• 外部运行时依赖：./assets/three.module.min.js、./assets/addons/。
• 使用 Google Fonts 提供的 Web 字体：Inter。

编辑规则（来自源项目）

1. 将 data-composition-variables 保留为单引号属性，并使用普通的 " JSON。切勿通过 Studio 的 Design 面板保存该属性。
2. 不要在静态标记中放入 <canvas>；应在运行时创建。
3. 将每个视觉状态都设为 t 的函数；确保支持跳转定位，才能让该区块可渲染。