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:
<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 [email protected] 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-seekCustomEvent; 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-variablesa 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.