Canopy Part Title (캐노피 부분 제목)
질감이 풍부한 잎사귀로 이루어진 빽빽한 캐노피가 얕은 피사계 심도로 프레임을 휩쓸다가 갈라지며 첫 번째 헤드라인을 드러냅니다. 두 번째 깊이-리프트 배치는 두 번째 헤드라인을 카메라 옆으로 지나가게 합니다. 소수의 잎은 글자 위에 남아 가벼운 산들바람을 유지합니다. 폰트, 두께, 크기, 자간, 잎 개수, 스윕 속도, 남은 잎의 흔들림은 변수로 조정 가능합니다.
구성 ID: canopy-part-title. 지속 시간 12초 (30fps, 1920×1080).
파일
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
설치
npx hyperframes add canopy-part-title 명령어로 설치합니다. 기본적으로 위 파일들은 compositions/canopy-part-title/ 아래에 배치됩니다. 그런 다음 호스트 index.html에 블록을 마운트합니다:
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
사용자 정의 값으로 렌더링하려면 구성 파일을 직접 대상으로 지정합니다:
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'
변수
런타임에 window.__hyperframes.getVariables()를 통해 읽습니다. 구성 루트에 data-composition-variables 속성(작은따옴표 속성, 일반 JSON)으로 선언됩니다.
| id | 타입 | 기본값 | 레이블 / 범위 |
|---|---|---|---|
headline1 | string | "Understory" | 헤드라인 1 |
headline2 | string | "Move slowly" | 헤드라인 2 |
font | string | "Helvetica" | 헤드라인 폰트 |
fontWeight | number | 900 | 폰트 두께 100–900 (100단계) |
fontSize | number | 1 | 폰트 크기 (1 = 자동 맞춤) 0.3–2 (0.01단계) |
letterSpacing | number | 0.01 | 자간 (em) -0.2–1 (0.01단계) |
background | color | "#020805" | 배경 |
leafCount | number | 170 | 스윕당 잎 개수 40–320 (1단계) |
stayCount | number | 5 | 남겨질 잎 개수 0–20 (1단계) |
sweepSpeed | number | 1 | 스윕 속도 0.3–3 (0.05단계) |
retainedBreeze | number | 1 | 남은 잎의 흔들림 0–2 (0.05단계) |
런타임 계약
window.__timelines["canopy-part-title"]에 등록된 일시 중지된 GSAP 타임라인 하나.hf-seekCustomEvent에서 다시 동기화합니다. 모든 프레임은 시간의 닫힌 함수입니다 (시드 PRNG만 사용, rAF 루프無, Date.now 無).- 렌더러: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, 포스트 프로세싱, 시드 PRNG, 그림자 맵. 활성 인스턴스당 약 350MB 사용; 한 번에 하나만 실행하세요.
- 외부 런타임 의존성:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js. - Google Fonts의 웹 폰트: Gelasio.
편집 규칙 (소스 프로젝트 기준)
data-composition-variables는 작은따옴표 속성 안에 일반"JSON을 유지하세요. Studio의 Design 패널을 통해 저장하지 마십시오.- 정적 마크업에
<canvas>를 넣지 마십시오. 런타임에 생성하십시오. - 모든 시각 상태를 t의 함수로 유지하십시오. seek-안전성이 블록을 렌더링 가능하게 만듭니다.