Content & Media Creation · 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.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Output shot: Bevelled cuboids enter as "cards" flying in from the right as a whole, exhibit staggered rotations during transit, decelerate to a hero stop, and exit to the left—forming a travelling-wave-style 3D carousel.
registry/blocks/cuboid-carousel/SKILL.md
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.
What it does: Places a "card carousel" in 3D while maintaining a rigid overall choreography (rather than chaotic independent flying), preserving the feel of a cohesive typographic layout.
Layout safety is geometrically derived: Spacing is computed from cuboid dimensions and "maximum achievable X half-span," ensuring cuboids never overlap—a structural guarantee rather than manually tweaked values.
registry/blocks/cuboid-carousel/SKILL.md
Spacing is derived from the cuboid dimensions and the largest reachable X half-extent, so cuboids can never overlap.
What it does: Answers the concern "will they collide if users set huge widths and heights?"—No, spacing recalculates automatically with dimensions.
The widest parameter surface in this batch: 40 variables follow the original DialKit schema, covering geometry, materials, lighting, shadows, background, camera, as well as durations and easings for each phase.
registry/blocks/cuboid-carousel/SKILL.md
Forty variables carry the original DialKit schema: geometry, materials, lights, shadows, backdrop, camera and every segment duration and easing.
What it does: Brings the entire "art direction tweak panel" into the block—allowing non-3D users to modify aesthetics via sliders without touching lighting formulas.
Dependencies are essentially localized: importmap points to bundled three.module.min.js, addons/, and a 593 KB motion data module cuboid-motion.js; the only external runtime URL is Inter from Google Fonts.
registry/blocks/cuboid-carousel/cuboid-carousel.html
"three": "./assets/three.module.min.js", … "cuboid-carousel/motion": "./assets/cuboid-motion.js" … href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
What it does: three and motion data are distributed with the block (~1.1 MB JS total), eliminating external network dependency for library loading; fonts are the sole runtime external link.
Card content is rendered dynamically onto face textures via 2D canvas, sourced either from built-in lists or the cardsJson variable—eliminating the strict need for image assets when changing content.
registry/blocks/cuboid-carousel/cuboid-carousel.html
function faceTexture(item) { … const c = document.createElement("canvas");
What it does: Card text is rendered via browser fonts, enabling content updates purely through variable changes.
Timeline features named segments and pause semantics: gsap.timeline({ paused: true }) with arrival / alternate-camera labels, where seek is driven by hf-seek events for resynchronization and redraws.
registry/blocks/cuboid-carousel/cuboid-carousel.html
/* ---- timeline: paused, seek-safe, no rAF ---- */ … const tl = gsap.timeline({ paused: true }); … tl.addLabel("arrival", 0);
What it does: Named labels allow external reference for "camera switch segments" (Studio timeline/choreography) while remaining seek-safe.
Two warmup stages ensure first-frame quality and stability: Prior to ready, it runs renderAt(0) and "draws across the timeline once and flushes the GPU," alongside a one-off setInterval polling __timelines registration completion.
registry/blocks/cuboid-carousel/cuboid-carousel.html
Draw across the timeline and flush the GPU before ready, so shader links … var tick = setInterval(function () { … if (!ids.length) return; … clearInterval(tick);
What it does: Prevents frame stutters caused by initial shader link compilation during playback—a warmup requirement specific to "frame-by-frame rendering" pipelines.
2Core Capabilities
013D cuboid card carousel shot (1920×1080, 6.6667s; fly-in → transit → hero dwell → exit left)
02Comprehensive tuning surface with 40 variables (geometry / material / light / shadow / background / camera / phase durations & easings, adopting DialKit ranges)
03Card content replaceable via JSON (cardsJson) or fallback built-in lists
04Adjustable shadows: map sizes 512–4096, softness 0–50 (radius under a 2048 map)
05Two-phase camera: transition from initial camera position (fov, settle frame, handheld intensity) to cameraTarget position
06Offline renderable: three core + addons (RoomEnvironment, BufferGeometryUtils) + motion data module are all distributed with the block
07Stand-alone rendering outside Studio: direct render with overrides for card content and hero index
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | three.js 与 addons（随块本地副本；PMREM/RoomEnvironment 造环境光） |
| package | GSAP 3.14.2（随块本地副本）+ 本地运动数据模块 |
| network | Google Fonts：Inter（产物期浏览器拉取，本块唯一外链） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Execute local script or command: cuboid-carousel.html (executed in browser/renderer: reads variables → builds three scene and card textures → registers paused timeline)
- 网络端点: Declare external network access: fonts.googleapis.com / fonts.gstatic.com (runtime: Inter font; the only external endpoint in this block)
Audit Notes: Evaluation target = this block directory (SKILL.md + composition HTML + bundled three/gsap/motion data modules + addons + license texts): no credential/env access, no shell scripts, no local file writes, no outbound data exfiltration. The sole network surface is the browser loading Inter from Google Fonts at runtime (Paradigm Appendix A, Rule 2: runtime assets are not penalized, only listed). Installation and rendering follow the official CLI ecosystem. Blue rating assigned.
5Second-Pass Verification
- [ok] 变量数与声明一致性（frontmatter 自称 40 variables） — 脚本实测：SKILL.md 变量表 40 行、html data-composition-variables 解析出 40 项、frontmatter 写 40 —— 一致。
- [ok] 「no rAF」注释 vs 代码里的 setInterval — 该 setInterval 是一次性的就绪轮询（等 __timelines 出现后立即 clearInterval），不是渲染循环；时间线注释也确写 seek-safe, no rAF。两者不冲突。
- [ok] 外链清点 — html 全文 http(s):// grep 仅命中三处 Google Fonts（preconnect ×2 + css2?family=Inter）；three/gsap/运动数据均为 ./assets/ 本地路径。
- [ok] registry-item 文件清单 vs 盘上文件 — 声明 10 个文件全部存在于盘上（含两个 addons 与两份许可文本），无远端 url 兜底。
- [ok] 几何安全声称 — SKILL.md 明写间距由尺寸与最大 X 半展推导；html 中 cuboidWidth/Height/Depth/cornerRadius/bevel/smoothness 均按 DialKit 区间读取（变量段注释写 every one clamped to the DialKit range）。
- [ok] 时长一致性 — registry-item duration 6.67、html data-duration 6.666666666666667、SKILL.md 标题行 6.666666666666667s —— 前两者为同一精度的两种写法。
6Verdict & Scenarios
Best for: Short clips (6.7s) requiring "a sequence of cards/items entering along a 3D trajectory and taking turns as hero elements," suited for product/feature launch videos where users wish to tweak geometry textures, lighting, and camera pacing without writing code.
Not for: Scenarios requiring independent choreography for each card or large card counts (>12) (count capped at 12, heroCard 1–12); pipelines sensitive to project size that avoid a 1 MB+ 3D runtime.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload cuboid-carousel.tar.gz
sha256:
Option B · Copy Guide for Agentfc159be9ba802332…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.