cuboid-carousel
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
- Installs
- 10.2K
- Last 24h
- +212
- Trending rank
- #1214
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/heygen-com/hyperframes --skill cuboid-carousel- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads cuboid-carousel automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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).
| 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.
FAQ
What does the cuboid-carousel skill do?
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
How do I install cuboid-carousel?
Run npx skills add https://github.com/heygen-com/hyperframes --skill cuboid-carousel in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cuboid-carousel/ (personal) or .claude/skills/cuboid-carousel/ (project).
Which AI agents can use cuboid-carousel?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is cuboid-carousel safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains cuboid-carousel?
It is published by heygen-com in heygen-com/hyperframes. It has 10,212 recorded installs.
More from heygen-com/hyperframes
hyperframes-cli
heygen-com/hyperframes
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
Popular other skills
ask-matt
mattpocock/skills
Ask which skill or flow fits your situation. A router over the skills in this repo.
to-questionnaire
mattpocock/skills
Turn a decision you can't fully answer into a questionnaire for someone else to fill in.
loop-me
mattpocock/skills
Grill me about specs for the workflows I want to build, within this workspace.
caveman-help
juliusbrussee/caveman
Quick-reference card for the three caveman skills and their commands. Trigger: /caveman-help or "caveman help".
brandkit
leonxlnx/taste-skill
Moved to github.com/Leonxlnx/imagegen-skills. Runs only when called by name.