유리 조각 타이틀
보로노이 절단 유리창이 깊이에서 회전하며 날아와 헤드라인의 타일 실루엣으로 자리 잡은 후, 카메라 너머로 날아갑니다. 각 조각은 지터(흔들림)가 적용된 블롭(blob)을 서덜랜드-호지먼(Sutherland-Hodgman) 방식으로 보로노이 셀에 클리핑한 형태이므로 조각들이 항상 텍스트를 덮습니다. 유리 및 매트캡 표면에는 픽셀 단위 안개 효과가 적용되며, Z축 비행과 이징(easing)이 분리되어 조각들이 공간을 시각적으로 가로지릅니다. 타일 수가 1이면 단일 창문으로 표시됩니다.
컴포지션 ID: glass-shard-title. 30fps, 1920×1080에서 12.16초 동안 재생됩니다.
파일
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 타임라인 1개.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-안전성이 블록을 렌더링 가능하게 만듭니다.