Back to Details

cuboid-carousel

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Cuboid Carousel

长方体轮播

Rounded, bevelled cuboids carrying card content fly in from the right as one rigid group, cruise with a per-cuboid rotation stagger, decelerate to a hero hold, then exit left. Spacing is derived from the cuboid dimensions and the largest reachable X half-extent, so cuboids can never overlap. Forty variables carry the original DialKit schema: geometry, materials, lights, shadows, backdrop, camera and every segment duration and easing. Cards come from the built-in list or a JSON variable.
Composition id: 
cuboid-carousel
. Duration 6.666666666666667 s at 30 fps, 1920×1080.
携带卡片内容的圆角斜边长方体作为一个刚性整体从右侧飞入，以每个长方体错开旋转的方式巡航，减速到主卡片停留，然后从左侧退出。间距由长方体尺寸和最大可达到的 X 半范围推导而来，因此长方体永远不会重叠。四十个变量承载了原始 DialKit 模式：几何体、材质、灯光、阴影、背景、相机以及每个片段的持续时间和缓动。卡片来自内置列表或 JSON 变量。
合成 ID：
cuboid-carousel
。时长 6.666666666666667 秒，30 fps，1920×1080。

Files

文件

  • 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)
  • 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)

Install

安装

Install with 
npx hyperframes add cuboid-carousel
; by default the files above land under 
compositions/cuboid-carousel/
. Then mount the block from the host 
index.html
:
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>
Render with custom values by targeting the composition file directly:
sh
npx --yes hyperframes@0.8.12 render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
使用 
npx hyperframes add cuboid-carousel
安装；默认情况下上述文件会放置在 
compositions/cuboid-carousel/
下。然后从宿主 
index.html
挂载该块：
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>
通过直接指定合成文件，使用自定义值渲染：
sh
npx --yes hyperframes@0.8.12 render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'

Variables

变量

Read at runtime via 
window.__hyperframes.getVariables()
; declared on the composition root as 
data-composition-variables
(single-quoted attribute, plain JSON).
idtypedefaultlabel / range
cardsJson
string
""
Content · Cards JSON (optional, see CARDS in source)
heroCard
number
4
Content · Hero card (1-based) 1–12 step 1
count
number
8
Content · Repeating card count 1–12 step 1
gap
number
0.01
Layout · Extra gap between cuboids 0–1.5 step 0.005
cuboidWidth
number
1.7
Cuboid · Width 0.3–5 step 0.01
cuboidHeight
number
2.4
Cuboid · Height 0.3–6 step 0.01
cuboidDepth
number
0.14
Cuboid · Thickness (depth) 0.02–2 step 0.01
cornerRadius
number
0.105
Cuboid · Corner radius 0–0.6 step 0.005
bevelSize
number
0.03
Cuboid · Bevel size (edge chamfer) 0–0.3 step 0.001
bevelThickness
number
0.04
Cuboid · Bevel thickness 0–0.3 step 0.001
smoothness
number
32
Cuboid · Smoothness (segments) 1–32 step 1
bodyColor
color
"#242424"
Cuboid · Body colour
roughness
number
0.6
Cuboid · Roughness 0–1 step 0.01
metalness
number
0.4
Cuboid · Metalness 0–1 step 0.01
heroScale
number
1
Hero · Isolated scale 1–1.6 step 0.01
heroFillIntensity
number
0.55
Hero · Face light intensity 0–2 step 0.05
heroExitX
number
288
Hero · Exit X rotation degrees -720–720 step 1
heroExitY
number
-234
Hero · Exit Y rotation degrees -720–720 step 1
heroExitZ
number
198
Hero · Exit Z rotation degrees -720–720 step 1
ambientIntensity
number
0.35
Lights · Ambient intensity 0–4 step 0.01
ambientColor
color
"#ffffff"
Lights · Ambient colour
topIntensity
number
3.1
Lights · Top rig intensity 0–12 step 0.05
topColor
color
"#ffffff"
Lights · Top rig colour
bottomIntensity
number
2.15
Lights · Bottom rig intensity 0–12 step 0.05
bottomColor
color
"#ffcaad"
Lights · Bottom rig colour
keyIntensity
number
5
Lights · Key rig intensity 0–12 step 0.05
keyColor
color
"#ffe9d6"
Lights · Key rig colour
shadowRadius
number
44.5
Shadows · Softness at map size 2048 0–50 step 0.5
shadowMapSize
number
2048
Shadows · Map size 512–4096 step 256
backdrop
color
"#0b0d13"
Background · Colour
cameraFov
number
11
Camera · Initial Field of view 10–90 step 0.5
cameraX
number
-1.65
Camera · Initial X -20–20 step 0.05
cameraY
number
8.5
Camera · Initial Y -20–20 step 0.05
cameraZ
number
-8.508708
Camera · Initial Z (distance) -20–50 step 0.1
cameraSettleFrame
number
70
Camera · Settle frame (30 fps) 20–90 step 1
handheldStrength
number
1
Camera · Handheld hold strength 0–1 step 0.05
cameraTargetFov
number
34
Camera target · Field of view 10–90 step 0.5
cameraTargetX
number
-7.25
Camera target · X -20–20 step 0.05
cameraTargetY
number
1.15
Camera target · Y -20–20 step 0.05
cameraTargetZ
number
6.2
Camera target · Z 2–50 step 0.1
在运行时通过 
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

Runtime contract

运行时约定

  • One paused GSAP timeline registered as 
    window.__timelines["cuboid-carousel"]
    .
  • Re-syncs on the 
    hf-seek
    CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
  • Renderer: WebGL, GSAP, Canvas 2D, PMREM, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
  • External runtime dependencies: 
    ./assets/three.module.min.js
    , 
    ./assets/addons/
    .
  • Web fonts from Google Fonts: Inter.
  • 一个暂停的 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。

Editing rules (from the source project)

编辑规则（来自源项目）

  1. Keep 
    data-composition-variables
    a single-quoted attribute with plain 
    "
    JSON. Never save it through Studio's Design panel.
  2. Do not put 
    <canvas>
    in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.
  1. 保持 
    data-composition-variables
    为单引号属性，使用纯 
    "
    JSON。永远不要通过 Studio 的设计面板保存它。
  2. 不要将 
    <canvas>
    放在静态标记中；在运行时创建它。
  3. 保持每个视觉状态都是 t 的函数；可寻址安全性是该块可渲染的关键。