Deft
Ask AI

Search

Search skills, authors and topics

heygen-com / hyperframes

cuboid-carousel

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

View sourceVideoMotion

Install

npx skills add https://github.com/heygen-com/hyperframes --skill cuboid-carousel

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

idtypedefaultlabel / range
cardsJsonstring""Content · Cards JSON (optional, see CARDS in source)
heroCardnumber4Content · Hero card (1-based) 1–12 step 1
countnumber8Content · Repeating card count 1–12 step 1
gapnumber0.01Layout · Extra gap between cuboids 0–1.5 step 0.005
cuboidWidthnumber1.7Cuboid · Width 0.3–5 step 0.01
cuboidHeightnumber2.4Cuboid · Height 0.3–6 step 0.01
cuboidDepthnumber0.14Cuboid · Thickness (depth) 0.02–2 step 0.01
cornerRadiusnumber0.105Cuboid · Corner radius 0–0.6 step 0.005
bevelSizenumber0.03Cuboid · Bevel size (edge chamfer) 0–0.3 step 0.001
bevelThicknessnumber0.04Cuboid · Bevel thickness 0–0.3 step 0.001
smoothnessnumber32Cuboid · Smoothness (segments) 1–32 step 1
bodyColorcolor"#242424"Cuboid · Body colour
roughnessnumber0.6Cuboid · Roughness 0–1 step 0.01
metalnessnumber0.4Cuboid · Metalness 0–1 step 0.01
heroScalenumber1Hero · Isolated scale 1–1.6 step 0.01
heroFillIntensitynumber0.55Hero · Face light intensity 0–2 step 0.05
heroExitXnumber288Hero · Exit X rotation degrees -720–720 step 1
heroExitYnumber-234Hero · Exit Y rotation degrees -720–720 step 1
heroExitZnumber198Hero · Exit Z rotation degrees -720–720 step 1
ambientIntensitynumber0.35Lights · Ambient intensity 0–4 step 0.01
ambientColorcolor"#ffffff"Lights · Ambient colour
topIntensitynumber3.1Lights · Top rig intensity 0–12 step 0.05
topColorcolor"#ffffff"Lights · Top rig colour
bottomIntensitynumber2.15Lights · Bottom rig intensity 0–12 step 0.05
bottomColorcolor"#ffcaad"Lights · Bottom rig colour
keyIntensitynumber5Lights · Key rig intensity 0–12 step 0.05
keyColorcolor"#ffe9d6"Lights · Key rig colour
shadowRadiusnumber44.5Shadows · Softness at map size 2048 0–50 step 0.5
shadowMapSizenumber2048Shadows · Map size 512–4096 step 256
backdropcolor"#0b0d13"Background · Colour
cameraFovnumber11Camera · Initial Field of view 10–90 step 0.5
cameraXnumber-1.65Camera · Initial X -20–20 step 0.05
cameraYnumber8.5Camera · Initial Y -20–20 step 0.05
cameraZnumber-8.508708Camera · Initial Z (distance) -20–50 step 0.1
cameraSettleFramenumber70Camera · Settle frame (30 fps) 20–90 step 1
handheldStrengthnumber1Camera · Handheld hold strength 0–1 step 0.05
cameraTargetFovnumber34Camera target · Field of view 10–90 step 0.5
cameraTargetXnumber-7.25Camera target · X -20–20 step 0.05
cameraTargetYnumber1.15Camera target · Y -20–20 step 0.05
cameraTargetZnumber6.2Camera 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)

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