코드 슬라이스 히어로
완전한 정사각형 타일 표면이 하나의 이음새 없는 헤드라인을 담고 있습니다. 가상의 커서가 표면을 가로지르면, 주변 타일이 가우시안 깊이 필드에 반응하여 들리고 기울어지며, 헤드라인 실루엣과 교차하는 셀만 뒤집혀 뒷면 헤드라인을 드러냅니다. 전체 그리드는 하나의 인스턴스화된 WebGL 2 드로우로, 공유되는 전면/후면 텍스처 쌍과 배치 처리된 투영 그림자 패스를 사용합니다. 복사, 텍스트 크기 및 정사각형 셀 크기가 서로 독립적이므로 타일이 늘어나지 않습니다. 스윕 방향, 이징 강도, 커서 반경, 폴오프, 깊이, 바운스 및 그림자는 모두 변수로 제어할 수 있습니다.
구성 ID: code-slice-hero. 30fps에서 8초, 1920×1080.
파일
code-slice-hero.html(24 KB)assets/Geist-Bold.ttf(65 KB)assets/Geist-OFL.txt(4 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)shadows.js(10 KB)surface.js(8 KB)
설치
npx hyperframes add code-slice-hero로 설치하세요. 기본적으로 위 파일들은 compositions/code-slice-hero/ 디렉토리에 저장됩니다. 그런 다음 호스트 index.html에 블록을 마운트합니다:
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
커스텀 값으로 렌더링하려면 구성 파일을 직접 대상으로 지정합니다:
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'
변수
런타임에 window.__hyperframes.getVariables()를 통해 읽습니다. 구성 루트에 data-composition-variables (작은따옴표 속성, 일반 JSON)로 선언됩니다.
| id | type | 기본값 | 레이블 / 범위 |
| ------------------- | ------ | ----------------- | ------------------------------------------------- | ---------------- |
| headline | string | "MAKE IT" | 복사 · 전면 헤드라인 최대 32자 |
| reverseHeadline | string | "MATTER." | 복사 · 후면 헤드라인 최대 32자 |
| direction | enum | "left-to-right" | 모션 · 스윕 방향 (왼쪽에서 오른쪽 | 오른쪽에서 왼쪽) |
| sweepDuration | number | 4.2 | 모션 · 스윕 지속 시간 2.6–4.5 단계 0.05 |
| sweepEaseStrength | number | 3 | 모션 · 스윕 이징 강도 0–3 단계 0.05 |
| flipDuration | number | 0.75 | 모션 · 각 타일 플립 0.65–1.65 단계 0.05 |
| cursorRadius | number | 210 | 커서 · 영향 반경 160–480 단계 10 |
| cursorFalloff | number | 1.4 | 커서 · 영향 폴오프 0.4–3.5 단계 0.05 |
| cursorDepth | number | 80 | 커서 · 깊이 (+는 카메라 방향) -320–320 단계 10 |
| tiltStrength | number | 55 | 커서 · 당김 / 기울기 강도 0–55 단계 1 |
| noiseStrength | number | 2 | 모션 · 유기적 변형 0–2 단계 0.05 |
| flipBounce | number | 0.15 | 모션 · 탄성 플립 바운스 0–0.8 단계 0.05 |
| cellSize | number | 112 | 슬라이스 · 정사각형 셀 크기 24–120 단계 4 |
| formationScale | number | 1 | 슬라이스 · 로컬 포메이션 스케일 0.94–1 단계 0.001 |
| fontSize | number | 310 | 타입 · 최대 크기 160–480 단계 5 |
| behindColor | color | "#212121" | 표면 · 타일 뒤 배경 |
| shadowStrength | number | 0.19 | 표면 · 투영 그림자 강도 0–0.65 단계 0.01 |
| shadowSoftness | number | 4 | 표면 · 투영 그림자 부드러움 0.5–4 단계 0.1 |
런타임 계약
window.__timelines["code-slice-hero"]로 등록된 일시 중지된 GSAP 타임라인 하나.hf-seekCustomEvent에서 다시 동기화됨. 모든 프레임은 시간의 폐쇄형 함수(시드된 PRNG만 사용, rAF 루프 없음, Date.now 없음).- 렌더러: GSAP, Canvas 2D, 시드된 PRNG.
- 외부 런타임 종속성: 없음 (로컬에서 제공).
- 로컬 폰트: assets/Geist-Bold.ttf.
편집 규칙 (소스 프로젝트에서)
data-composition-variables는 작은따옴표 속성으로 일반"JSON을 사용하세요. Studio의 디자인 패널을 통해 저장하지 마세요.- 정적 마크업에
<canvas>를 넣지 말고 런타임에 생성하세요. - 모든 시각적 상태를 t의 함수로 유지하세요. seek 안전성은 블록을 렌더링 가능하게 만드는 핵심입니다.