캐노피 파트 타이틀
질감이 있는 잎사귀로 이루어진 빽빽한 캐노피가 얕은 심도로 프레임을 가로질러 휩쓸다가 갈라지며 첫 번째 헤드라인을 드러냅니다. 두 번째로 깊이 있는 배치가 두 번째 헤드라인을 카메라 앞으로 가져옵니다. 소수의 잎사귀가 타입 위에 남아 가벼운 산들바람을 유지합니다. 글꼴, 두께, 크기, 자간, 잎사귀 개수, 휩쓰는 속도, 남아 있는 잎사귀의 산들바람은 변수로 조정할 수 있습니다.
컴포지션 id: canopy-part-title. 30fps, 1920×1080에서 12초 동안 재생됩니다.
파일
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, 그림자 맵. 라이브 인스턴스당 약 350 MB 예상; 한 번에 하나씩 실행합니다.
- 외부 런타임 종속성:
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의 디자인 패널을 통해 저장하지 마십시오.- 정적 마크업에
<canvas>를 넣지 말고 런타임에 생성하세요. - 모든 시각적 상태를 t의 함수로 유지하세요. seek-안전성은 블록을 렌더링 가능하게 만드는 요소입니다.