코드 슬라이스 히어로 (Code Slice Hero)
전체 정사각형 타일 표면에 하나의 이음새 없는 제목이 표현됩니다. 가상의 커서가 표면을 가로지르면 가우시안 깊이 필드에 따라 주변 타일이 들어 올려지고 기울어지며, 제목 실루엣과 교차하는 셀만 뒤집혀 뒷면 제목을 드러냅니다. 전체 그리드는 하나의 인스턴스 WebGL 2 드로우로, 앞면/뒷면 텍스처 쌍을 공유하고 배치 처리된 투영 그림자 패스를 포함합니다. 복사본, 텍스트 크기 및 정사각형 셀 크기는 독립적이므로 타일이 늘어나지 않습니다. 스윕 방향, 이징 강도, 커서 반경, 폴오프, 깊이, 바운스 및 그림자는 모두 변수로 제어 가능합니다.
컴포지션 ID: code-slice-hero. 지속 시간 8초 (30fps), 1920×1080.
파일
code-slice-hero.html(24KB)assets/Geist-Bold.ttf(65KB)assets/Geist-OFL.txt(4KB)assets/gsap-3.14.2.min.js(128KB)assets/GSAP-NOTICE.txt(1KB)shadows.js(10KB)surface.js(8KB)
설치
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 | default | label / 범위 |
|---|---|---|---|
headline | string | "MAKE IT" | 복사 · 앞면 제목 최대 32자 |
reverseHeadline | string | "MATTER." | 복사 · 뒷면 제목 최대 32자 |
direction | enum | "left-to-right" | 동작 · 스윕 방향 (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 안전성은 블록을 렌더링 가능하게 만드는 핵심입니다.