Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
無料GitHub で公開
cuboid-carousel
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
インストール方法を見る含まれるファイル（11）
- SKILL.md7.0 KB
- assets/addons/environments/RoomEnvironment.js4.8 KB
- assets/addons/utils/BufferGeometryUtils.js36.2 KB
- assets/cuboid-motion.js593.3 KB
- assets/gsap-3.14.2.min.js128.2 KB
- assets/GSAP-NOTICE.txt145 B
- assets/Three-LICENSE.txt1.1 KB
- assets/three.core.min.js554.5 KB
- assets/three.module.min.js468.3 KB
- cuboid-carousel.html38.2 KB
- registry-item.json2.3 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新