와이어프레임 포털 타이틀
번들된 Geist 글꼴을 TTF 로더와 폴리곤 오프셋을 통해 돌출된 와이어프레임 문자 형태로 만들고, 포털 버스트(혼돈도 변수로 조절 가능)를 통해 드러냅니다. 두 번째 비트에서 문자들이 지정된 대체 문구로 전환되며, 전체 단어 래핑과 자동 글꼴 크기 조절이 적용됩니다. 전환은 조정 가능한 이징 곡선과 정착 글리치(staggered with a tunable easing curve and settle glitch)가 적용되며, 깊이 안개(depth fog)를 선택적으로 사용할 수 있습니다.
컴포지션 ID: wireframe-portal-title. 지속 시간 8초, 30fps, 1920×1080.
파일
wireframe-portal-title.html(63 KB)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)
설치
npx hyperframes add wireframe-portal-title 명령어로 설치합니다. 기본적으로 위 파일들은 compositions/wireframe-portal-title/ 디렉토리 아래에 배치됩니다. 그런 다음 호스트 index.html에서 블록을 마운트합니다:
<div
data-composition-id="wireframe-portal-title"
data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
컴포지션 파일을 직접 대상으로 사용자 정의 값으로 렌더링하려면:
npx --yes [email protected] render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'
변수
런타임에 window.__hyperframes.getVariables()를 통해 읽습니다. 컴포지션 루트에 data-composition-variables 속성(작은따옴표 속성, 일반 JSON)으로 선언됩니다.
| id | type | default | label / range |
|---|---|---|---|
title | string | "BREAKTHROUGH" | 제목 최대 18자 |
replacementPhrase | string | "Lets do this sir!" | 3D 대체 문구 (자동 레이아웃) |
phraseDuration | number | 1.85 | 문구 전환 지속 시간 (초) 0.65–2.9 step 0.05 |
phraseEasing | number | 8 | 전환 이징 (1 부드러움 – 8 빠름) 1–8 step 0.25 |
settleGlitch | number | 0.2 | 문자 정착 글리치 강도 0–4 step 0.05 |
depthFog | boolean | true | 깊이 안개 (초기 페이드는 항상 켜짐) |
subtitle | string | "HYPERFRAMES PORTAL TITLE" | 부제목 최대 48자 |
accent | color | "#F5C518" | 강조색 |
burstChaos | number | 1 | 버스트 혼돈도 (0-2) 0–2 step 0.01 |
런타임 계약
- 일시 정지된 GSAP 타임라인이
window.__timelines["wireframe-portal-title"]로 등록됩니다. hf-seekCustomEvent를 통해 다시 동기화됩니다. 모든 프레임은 시간의 닫힌 형태 함수입니다 (시드된 PRNG만 사용, rAF 루프 없음, Date.now 없음).- 렌더러: three.js 0.181.2, GSAP 3.14.2, Canvas 2D, GLSL 셰이더, 후처리, 시드된 PRNG, Clipper. 라이브 인스턴스당 약 350 MB 예산; 한 번에 하나만 실행하십시오.
- 외부 런타임 종속성:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/clipper.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/. - 로컬 글꼴: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
편집 규칙 (원본 프로젝트 기준)
data-composition-variables는 작은따옴표 속성으로 유지하고 일반"JSON을 사용하십시오. Studio의 디자인 패널을 통해 저장하지 마십시오.- 정적 마크업에
<canvas>를 넣지 마십시오. 런타임에 생성하십시오. - 모든 시각적 상태를 t의 함수로 유지하십시오. seek-safe함이 이 블록을 렌더링 가능하게 만드는 핵심입니다.