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