szeproka/hyperframes-registry

큐보이드 캐러셀

둥근 모서리와 베벨 처리된 직육면체(큐보이드)들이 카드 콘텐츠를 담아 오른쪽에서 하나의 그룹으로 날아들고, 각 큐보이드마다 회전 지연을 두며 이동하다가 히어로 카드에서 감속 정지한 후 왼쪽으로 퇴장합니다. 간격은 큐보이드 크기와 도달 가능한 최대 X 절반 범위로부터 계산되므로 큐보이드가 서로 겹치지 않습니다. 40개의 변수가 원래 DialKit 스키마(형상, 재질, 조명, 그림자, 배경, 카메라 및 모든 구간의 지속 시간과 이징)를 담고 있습니다. 카드는 내장 리스트 또는 JSON 변수에서 가져옵니다.

구성 ID: cuboid-carousel. 지속 시간 약 6.667초(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	타입	기본값	레이블 / 범위
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-seek CustomEvent에 재동기화됨; 모든 프레임은 시간의 폐쇄형 함수(시드된 PRNG만 사용, rAF 루프 없음, Date.now 없음).
• 렌더러: WebGL, GSAP, Canvas 2D, PMREM, 그림자 맵. 활성 인스턴스당 약 350MB 예산; 한 번에 하나만 실행.
• 외부 런타임 종속성: ./assets/three.module.min.js, ./assets/addons/.
• Google Fonts 웹 폰트: Inter.

편집 규칙 (원본 프로젝트에서)

1. data-composition-variables는 작은따옴표 속성에 일반 " JSON을 사용합니다. Studio의 디자인 패널을 통해 저장하지 마세요.
2. 정적 마크업에 <canvas>를 넣지 마세요. 런타임에 생성합니다.
3. 모든 시각적 상태를 t의 함수로 유지하세요. 시크 안전성이 블록을 렌더링 가능하게 만듭니다.