# Cuboid Carousel

Animates content as a carousel of bevelled cuboids riding a travelling wave.

- Repository: https://github.com/heygen-com/hyperframes (77062 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -a claude-code -y`
Codex: `npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -a codex -y`
Cursor: `npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -a cursor -y`
Gemini CLI: `npx skills add heygen-com/hyperframes --skill cuboid-carousel -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add heygen-com/hyperframes`

## Description

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

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

The rest: https://github.com/heygen-com/hyperframes/blob/HEAD/registry/blocks/cuboid-carousel/SKILL.md