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