유리 파편 타이틀
보로노이 절단 유리창 조각들이 깊이에서 날아와 회전하며 헤드라인의 타일 실루엣으로 자리 잡은 후, 카메라 밖으로 날아갑니다. 각 조각은 지터링된 블롭을 보로노이 셀에 대해 서덜랜드-호지맨 클리핑한 결과물로, 조각들이 항상 글자를 덮습니다. 유리와 매트캡 표면에는 픽셀 단위 안개가 적용됩니다. Z축 비행은 이징과 분리되어 조각들이 시각적으로 그 거리를 가로지릅니다. 타일 수 1은 단일 창문을 제공합니다.
컴포지션 ID: glass-shard-title. 지속 시간 12.16초 @ 30fps, 1920×1080.
파일
glass-shard-title.html(16 KB)assets/ferndale_studio_01_1k.hdr(1.6 MB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/cormorant-garamond.woff2(37 KB)assets/fonts/CormorantGaramond-OFL.txt(4 KB)assets/glass-main.js(549 KB)assets/Three-LICENSE.txt(1 KB)assets/matcap-1.png(설치 시 CDN에서 가져옴)
설치
npx hyperframes add glass-shard-title 명령어로 설치합니다. 기본적으로 위 파일들은 compositions/glass-shard-title/ 디렉토리 아래에 위치합니다. 그런 다음 호스트 index.html에서 블록을 마운트합니다:
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
컴포지션 파일을 직접 대상으로 지정하여 사용자 정의 값으로 렌더링합니다:
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
변수
런타임에 window.__hyperframes.getVariables()를 통해 읽습니다. 컴포지션 루트에 data-composition-variables (단일 따옴표 속성, 일반 JSON)로 선언됩니다.
| ID | 타입 | 기본값 | 레이블 / 범위 |
|---|---|---|---|
headline | string | "Designed in glass" | 헤드라인 최대 40자 |
tileCount | number | 8 | 타일 1–400 간격 1 |
roundness | number | 0.4 | 둥글기 (0-1) 0–1 간격 0.01 |
bevel | number | 0.35 | 베벨 (0-1) 0–1 간격 0.01 |
meshSmooth | number | 0.6 | 표면 부드러움 (0-1) 0–1 간격 0.01 |
flyInTime | number | 2.3 | 날아오는 시간 (초) 0.2–6 간격 0.05 |
flyOutTime | number | 2.4 | 날아가는 시간 (초) 0.2–6 간격 0.05 |
stagger | number | 0.27 | 지연 (0-1) 0–1 간격 0.01 |
flyInRotation | number | 5 | 날아올 때 회전 (0-60) 0–60 간격 0.1 |
flyOutRotation | number | 6 | 날아갈 때 회전 (0-6) 0–6 간격 0.1 |
chaos | number | 0.25 | 윤곽 혼란 (0-1) 0–1 간격 0.01 |
padding | number | 1 | 가장자리 패딩 (0-1) 0–1 간격 0.01 |
sizeVariance | number | 0.35 | 크기 변동 (0-1) 0–1 간격 0.01 |
gap | number | 0.03 | 타일 간격 0–0.3 간격 0.002 |
easePow | number | 10 | 날아올 때 위치 이징 (1-10) 1–10 간격 0.1 |
sideDist | number | 3 | 측면 비행 거리 0–60 간격 0.5 |
zDist | number | -42 | Z축 시작 (음수) -400–0 간격 2 |
zOut | number | 14 | Z축 종료 (+는 카메라 너머) -400–60 간격 2 |
fog | number | 36 | 안개 거리 (0 = 끄기) 0–400 간격 2 |
런타임 계약
window.__timelines["glass-shard-title"]에 등록된 일시 정지된 GSAP 타임라인 하나.hf-seekCustomEvent에서 재동기화됨. 모든 프레임은 시간의 폐쇄형 함수(시드 기반 PRNG만 사용, rAF 루프 없음, Date.now 없음).- 렌더러: three.js 0.181.2 (번들됨), GSAP 3.14.2, Canvas 2D, GLSL 셰이더, HDR 환경, Matcap, 시드 기반 PRNG, d3-delaunay, 그림자 맵. 인스턴스당 약 350MB 예산; 한 번에 하나씩 실행.
- 외부 런타임 의존성:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js. - 로컬 폰트: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
- 번들된 코드는 컴포지션에 인라인됨 (assets/glass-main.js). .mjs 소스를 편집한 후 esbuild로 다시 빌드하고 다시 인라인.
편집 규칙 (소스 프로젝트 기준)
data-composition-variables를 단일 따옴표 속성으로 유지하고 일반"JSON을 사용합니다. Studio의 디자인 패널을 통해 저장하지 마십시오.- 정적 마크업에
<canvas>를 넣지 마십시오. 런타임에 생성하십시오. - 모든 시각적 상태를 t의 함수로 유지하십시오. seek-안전성은 블록 렌더링 가능하게 만드는 핵심입니다.