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.

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)

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:

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

id	type	default	label / 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

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.

Editing rules (from the source project)

Keep
```
data-composition-variables
```
a single-quoted attribute with plain
```
"
```
JSON. Never save it through Studio's Design panel.
Do not put
```
<canvas>
```
in static markup; create it at runtime.
Keep every visual state a function of t; seek-safety is what makes the block renderable.

cuboid-carousel

NPX Install

Tags

SKILL.md Content