큐보이드 캐러셀
둥글고 경사진 모서리를 가진 큐보이드들이 카드 콘텐츠를 담고 오른쪽에서 하나의 단단한 그룹으로 날아들어, 큐보이드마다 회전이 약간씩 다른 상태로 이동하다가 히어로 위치에서 감속하여 잠시 멈춘 후 왼쪽으로 퇴장합니다. 간격은 큐보이드 크기와 도달 가능한 최대 X축 반경을 기반으로 계산되므로 큐보이드가 겹칠 수 없습니다. 40개의 변수가 원래의 DialKit 스키마(기하학, 재질, 조명, 그림자, 배경, 카메라 및 모든 구간 지속 시간과 이징)를 그대로 전달합니다. 카드는 내장 목록 또는 JSON 변수에서 제공됩니다.
컴포지션 ID: cuboid-carousel. 지속 시간 6.666666666666667초, 30fps, 1920×1080.
파일
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)
설치
npx hyperframes add cuboid-carousel 명령어로 설치합니다. 기본적으로 위 파일들은 compositions/cuboid-carousel/ 디렉터리에 저장됩니다. 그런 다음 호스트 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>
컴포지션 파일을 직접 대상으로 사용자 정의 값으로 렌더링하려면:
npx --yes [email protected] render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
변수
런타임 시 window.__hyperframes.getVariables()를 통해 읽습니다. 컴포지션 루트에 data-composition-variables 속성(작은따옴표 속성, 일반 JSON)으로 선언됩니다.
| id | type | default | 레이블 / 범위 |
|---|---|---|---|
cardsJson | string | "" | 콘텐츠 · 카드 JSON (선택 사항, 소스의 CARDS 참조) |
heroCard | number | 4 | 콘텐츠 · 히어로 카드 (1부터 시작) 1–12 단계 1 |
count | number | 8 | 콘텐츠 · 반복 카드 수 1–12 단계 1 |
gap | number | 0.01 | 레이아웃 · 큐보이드 사이 추가 간격 0–1.5 단계 0.005 |
cuboidWidth | number | 1.7 | 큐보이드 · 너비 0.3–5 단계 0.01 |
cuboidHeight | number | 2.4 | 큐보이드 · 높이 0.3–6 단계 0.01 |
cuboidDepth | number | 0.14 | 큐보이드 · 두께(깊이) 0.02–2 단계 0.01 |
cornerRadius | number | 0.105 | 큐보이드 · 모서리 반경 0–0.6 단계 0.005 |
bevelSize | number | 0.03 | 큐보이드 · 베벨 크기(모서리 챔퍼) 0–0.3 단계 0.001 |
bevelThickness | number | 0.04 | 큐보이드 · 베벨 두께 0–0.3 단계 0.001 |
smoothness | number | 32 | 큐보이드 · 매끄러움(세그먼트) 1–32 단계 1 |
bodyColor | color | "#242424" | 큐보이드 · 본체 색상 |
roughness | number | 0.6 | 큐보이드 · 거칠기 0–1 단계 0.01 |
metalness | number | 0.4 | 큐보이드 · 금속성 0–1 단계 0.01 |
heroScale | number | 1 | 히어로 · 분리 배율 1–1.6 단계 0.01 |
heroFillIntensity | number | 0.55 | 히어로 · 면 조명 강도 0–2 단계 0.05 |
heroExitX | number | 288 | 히어로 · 퇴장 X 회전 각도 -720–720 단계 1 |
heroExitY | number | -234 | 히어로 · 퇴장 Y 회전 각도 -720–720 단계 1 |
heroExitZ | number | 198 | 히어로 · 퇴장 Z 회전 각도 -720–720 단계 1 |
ambientIntensity | number | 0.35 | 조명 · 앰비언트 강도 0–4 단계 0.01 |
ambientColor | color | "#ffffff" | 조명 · 앰비언트 색상 |
topIntensity | number | 3.1 | 조명 · 상단 조명 강도 0–12 단계 0.05 |
topColor | color | "#ffffff" | 조명 · 상단 조명 색상 |
bottomIntensity | number | 2.15 | 조명 · 하단 조명 강도 0–12 단계 0.05 |
bottomColor | color | "#ffcaad" | 조명 · 하단 조명 색상 |
keyIntensity | number | 5 | 조명 · 키 조명 강도 0–12 단계 0.05 |
keyColor | color | "#ffe9d6" | 조명 · 키 조명 색상 |
shadowRadius | number | 44.5 | 그림자 · 맵 크기 2048 기준 부드러움 0–50 단계 0.5 |
shadowMapSize | number | 2048 | 그림자 · 맵 크기 512–4096 단계 256 |
backdrop | color | "#0b0d13" | 배경 · 색상 |
cameraFov | number | 11 | 카메라 · 초기 화각 10–90 단계 0.5 |
cameraX | number | -1.65 | 카메라 · 초기 X -20–20 단계 0.05 |
cameraY | number | 8.5 | 카메라 · 초기 Y -20–20 단계 0.05 |
cameraZ | number | -8.508708 | 카메라 · 초기 Z (거리) -20–50 단계 0.1 |
cameraSettleFrame | number | 70 | 카메라 · 안정화 프레임 (30fps) 20–90 단계 1 |
handheldStrength | number | 1 | 카메라 · 핸드헬드 유지 강도 0–1 단계 0.05 |
cameraTargetFov | number | 34 | 카메라 대상 · 화각 10–90 단계 0.5 |
cameraTargetX | number | -7.25 | 카메라 대상 · X -20–20 단계 0.05 |
cameraTargetY | number | 1.15 | 카메라 대상 · Y -20–20 단계 0.05 |
cameraTargetZ | number | 6.2 | 카메라 대상 · Z 2–50 단계 0.1 |
런타임 계약
window.__timelines["cuboid-carousel"]에 등록된 일시 중지된 GSAP 타임라인 하나.hf-seekCustomEvent에서 재동기화됨. 모든 프레임은 시간의 폐쇄형 함수(시드 PRNG만 사용, rAF 루프 없음, Date.now 없음).- 렌더러: WebGL, GSAP, Canvas 2D, PMREM, 그림자 맵. 활성 인스턴스당 약 350MB 예산. 한 번에 하나만 실행.
- 외부 런타임 종속성:
./assets/three.module.min.js,./assets/addons/. - Google Fonts의 웹 폰트: Inter.
편집 규칙 (소스 프로젝트 기준)
data-composition-variables는 작은따옴표 속성으로 유지하고 일반"JSON을 사용합니다. Studio의 디자인 패널을 통해 저장하지 마십시오.- 정적 마크업에
<canvas>를 넣지 말고 런타임에 생성하십시오. - 모든 시각 상태를 t의 함수로 유지하십시오. seek 안전성은 블록을 렌더링 가능하게 만드는 요소입니다.