cuboid-carousel
ساخت carousel سه‌بعدی از cuboidهای bevelشده برای ویدیوهای چشم‌گیر
این skill یک carousel سه‌بعدی برای HyperFrames ایجاد می‌کند که در آن cuboidهای گرد و bevelشده، کارت‌های محتوا را روی موجی متحرک جابه‌جا می‌کنند. گروه کارت‌ها وارد قاب می‌شود، روی کارت قهرمان مکث می‌کند و سپس از صحنه خارج می‌شود.
با ۴۰ متغیر قابل تنظیم برای هندسه، نور، متریال، دوربین، سایه و زمان‌بندی، می‌توانید خروجی 1920×1080 با مدت ۶٫۶۷ ثانیه را برای معرفی محصول، نمایش قابلیت‌ها یا محتوای تبلیغاتی شخصی‌سازی و با HyperFrames رندر کنید.
چه چیزی می‌گیرید
- بلوک آماده HyperFrames با شناسه composition به نام cuboid-carousel
- carousel سه‌بعدی با cuboidهای غیرهم‌پوشان، حرکت موجی و چرخش staggered
- پشتیبانی از کارت‌های پیش‌فرض یا داده‌های سفارشی با cardsJson
- ۴۰ متغیر برای تنظیم محتوا، ابعاد، bevel، متریال، نور، دوربین و timing
- فایل‌های آماده Three.js و GSAP به‌همراه دستور نصب و render
برای چه کاری خوب است
- معرفی محصولات، قابلیت‌ها یا مجموعه کارت‌ها در ویدیوهای کوتاه تبلیغاتی
- ساخت تیزرهای سه‌بعدی با یک کارت hero برجسته و ورود و خروج سینمایی
- تیم‌هایی که از HyperFrames برای تولید ویدیو با HTML استفاده می‌کنند
برای چه کاری نیست
- ویدیوهای واقع‌گرایانه، مصاحبه‌ای یا پروژه‌هایی که به تدوین چندلایه نیاز دارند
- صحنه‌هایی با تعداد زیاد آبجکت یا چند نمونه هم‌زمان؛ هر نمونه حدود 350 MB حافظه مصرف می‌کند
دربارهٔ این اسکیل
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.