cuboid-carousel Skill for Claude: What It Does and How to Install It
A ready-made HyperFrames scene: bevelled 3D cuboids carry content cards in, hold on a hero card and exit.
- Installs
- 11K
- on skills.sh
- Stars
- 77.1K
- on GitHub
- Files
- 10
- besides SKILL.md
- Updated
- Nov 2026
- last repo commit
cuboid-carousel is a HyperFrames block, a ready-made scene you add to a video project. 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.
It renders at 1920x1080 and 30 fps for about 6.7 seconds. Forty variables cover the cards, geometry, materials, lights, shadows, backdrop, camera and timing. Cards come from the built-in list or a JSON variable.
Good for
- Developers and designers making videos with HyperFrames
- Product teams showing a row of feature cards in 3D
- Developers who want a configurable Three.js card scene
Install cuboid-carousel
Any client
- 1
Run this in a terminal.
shellnpx hyperframes add cuboid-carousel
Requires Node.js 22 or later, A HyperFrames project.
Run the add command from your HyperFrames video project. The files land under compositions/cuboid-carousel/. The README documents creating a project with npx hyperframes init and lists Node.js 22+ and FFmpeg as requirements. This block is a ready-made scene and not an agent workflow, so there is no Claude app upload route.
From the project README. Source.
What's in the skill
When it loads
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
Sections in SKILL.md
- Files
- Install
- Variables
- Runtime contract
- Editing rules (from the source project)
Key facts
- Author
- heygen-com (repo owner)
- License
- Apache-2.0
- Installs on skills.sh
- 10,952 (Nov 2, 2026)
- Last repo commit
- Nov 2, 2026
What it includes
One block, id cuboid-carousel, 6.666666666666667 s
Cuboids fly in from the right as one group, cruise with a per-cuboid rotation stagger, slow to a hero hold and exit left. Spacing is derived from the cuboid size so they cannot overlap.
Read ·
Composition40 settings you can override at render time
Content (cardsJson, heroCard, count), layout gap, cuboid size, bevel and materials, hero settings, lights, shadows, backdrop colour, and camera and camera target position and field of view.
Read ·
Variables (40)Copies the files into compositions/cuboid-carousel/
Runs the HyperFrames CLI add command, which writes the block's files into your project.
Runs code ·
Add commandRenders the composition file with --variables
Runs hyperframes render on the composition file with your values as JSON.
Runs code ·
Render commandPaused GSAP timeline, seek-safe frames
One paused GSAP timeline is registered as window.__timelines["cuboid-carousel"] and every frame is a function of time.
Read ·
Runtime contractThree rules from the source project
Keep data-composition-variables a single-quoted attribute with plain JSON and never save it through Studio's Design panel. Do not put a canvas in static markup. Keep every visual state a function of time.
Read ·
Editing rules
From the official docs
Permissions
Low risk
What it can do
- Read your data
- Create and change things
- Delete things
- Read-only mode
Watch out for
Render uses npx with --yes
The render command in SKILL.md is npx --yes hyperframes@0.8.12, which installs that package without asking. Run it in a project you trust. github.com
The add command writes files into your project
hyperframes add copies the block's files into compositions/cuboid-carousel/ (see registry-item.json). Check the folder before committing. github.com
The composition loads a web font
SKILL.md lists web fonts from Google Fonts (Inter). Rendering offline needs the font available locally. github.com
Security advisories
No published security advisories as of Nov 2, 2026.
Technical details
| Turning on read-only | No read-only mode. The add and render commands write files. |
|---|---|
| Talks to | fonts.googleapis.com and fonts.gstatic.com (Google Fonts, Inter) |
| Scopes |
|
Questions
What does cuboid-carousel do?
A ready-made HyperFrames scene: bevelled 3D cuboids carry content cards in, hold on a hero card and exit. It is a block from the HyperFrames catalog, so it adds a finished scene to a video project and does not change how Claude works.
How do I install cuboid-carousel?
Use the install box at the top of this page. It adds the block to a HyperFrames project, shows how to mount it in index.html and gives the render command.
Do I need the HyperFrames agent skills?
Not to add or render this block, because SKILL.md gives the commands. If you want an agent to build more compositions, the HyperFrames README documents its agent skills and a Claude Code plugin.
What can I change?
40 variables. Content (cardsJson, heroCard, count), layout gap, cuboid size, bevel and materials, hero settings, lights, shadows, backdrop colour, and camera and camera target position and field of view.
What does it need?
A HyperFrames project with Node.js 22 or later and FFmpeg, per the README. SKILL.md also budgets roughly 350 MB per live instance and says to run one at a time.
Can I use it in the Claude app?
No. The block is added and rendered with commands on your machine, and the README does not document a Claude app route.
Is it safe?
Installing it copies files into your project, and rendering runs npx and the HyperFrames CLI on your machine. The composition loads the Inter web font from Google Fonts, as listed in SKILL.md. Read the files before you render, and keep the project in version control.
Information
updated Nov 2, 2026
- Repository
- heygen-com/hyperframes
- Folder
registry/blocks/cuboid-carousel
Sources
Docs, issue trackers and discussions this page is built from.
Show all 3Hide
- cuboid-carousel SKILL.md · github.com
- heygen-com/hyperframes README · github.com
- cuboid-carousel registry-item.json · github.com