Frost Sequence Camera Orbit
완전한 22.5초 얼음 시퀀스: 로고, 첫 번째 텍스트, 두 번째 텍스트, 분할, 페이드 아웃. 카메라는 고정된 오브젝트 주위를 공전하며 읽기 쉬운 속도로 천천히 전면을 비춥니다. 각 전환은 동일한 파티클 필드에 의해 연결됩니다. 두 개의 텍스트와 SVG 로고를 커스터마이징할 수 있으며, 소스에는 카메라 및 조립 타이밍을 편집할 수 있는 변수가 포함되어 있습니다.
컴포지션 ID: frost-sequence-rig. 30fps, 1920×1080, 22.5초.
파일
frost-sequence-camera-orbit.html(131 KB)assets/example-logo.svg(1 KB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/frost.js(1.5 MB)assets/Three-LICENSE.txt(1 KB)assets/ThreeMeshBVH-LICENSE.txt(1 KB)assets/OpentypeJS-LICENSE.txt(1 KB)assets/Clipper-LICENSE.txt(3 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/logo.svg(1 KB)assets/shards-atlas.png(설치 시 CDN에서 가져옴)assets/test-mark.svg(1 KB)assets/textures/bluenoise64.png(12 KB)assets/textures/ice-inclusions-generated.png(설치 시 CDN에서 가져옴)
설치
npx hyperframes add frost-sequence-camera-orbit 명령어로 설치합니다. 기본적으로 위 파일들은 compositions/frost-sequence-camera-orbit/ 디렉토리에 저장됩니다. 그런 다음 호스트 index.html에서 블록을 마운트합니다:
<div
data-composition-id="frost-sequence-rig"
data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
data-start="0"
data-duration="22.5"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
사용자 정의 값을 사용하여 렌더링하려면 컴포지션 파일을 직접 대상으로 지정합니다:
npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"깨지기|쉬운.","headline2":"기억하기|쉬운."}'
변수
런타임 시 window.__hyperframes.getVariables()를 통해 읽습니다. 컴포지션 루트에 data-composition-variables (작은따옴표 속성, 일반 JSON)로 선언됩니다.
| id | 타입 | 기본값 | 레이블 / 범위 |
|---|---|---|---|
headline1 | string | `"깨지기 | 쉬운."` |
headline2 | string | `"기억하기 | 쉬운."` |
logoUrl | string | "assets/logo.svg" | 로고 SVG 에셋 경로 (Assets에 업로드한 후 경로 붙여넣기) 최대 200자 |
assemblyMode | enum | "hybrid" | 조립 응답 (physical |
materialBaseColor | color | "#ffffff" | 기본 색상 |
baseRoughness | number | 0.31 | 기본 거칠기 0–0.5 단계 0.005 |
materialTransmission | boolean | true | 투과 |
materialBacklight | number | 0.27 | 얼음을 통한 역광 0–2 단계 0.01 |
ior | number | 1.675 | 굴절률 1–2 단계 0.005 |
thicknessScale | number | 2.04 | 두께 스케일 0.1–3 단계 0.01 |
materialAbsorption | boolean | true | 흡수 / 색조 |
attenuationColor | color | "#d5f4ff" | 감쇠 색상 (흰색 = 흡수 없음, 투명 유리) |
attenuationDistance | number | 6.54 | 감쇠 거리 0.05–12 단계 0.01 |
materialDispersion | boolean | false | 분산 |
dispersion | number | 0.12 | 분산 (0 = 꺼짐; 켜짐/꺼짐 시 다시 로드됨) 0–0.3 단계 0.005 |
materialReflections | boolean | true | 반사 |
envIntensity | number | 2.04 | 환경 강도 0–3 단계 0.01 |
specularIntensity | number | 1.44 | 반사광 강도 0–2 단계 0.01 |
materialFrost | boolean | true | 서리 |
materialInteriorFrost | number | 0 | 균일한 서리 0–1 단계 0.01 |
frostScale | number | 0.7 | 스케일 0.2–6 단계 0.05 |
frostThreshold | number | 0.62 | 임계값 (1 = 서리 없음, 투명 유리) 0–1 단계 0.01 |
frostSoftness | number | 0.24 | 부드러움 0.01–1 단계 0.01 |
frostRoughness | number | 0.73 | 거칠기 0–1 단계 0.01 |
frostDiffuse | number | 0.11 | 확산 (서리 부분이 받는 빛의 양) 0–1 단계 0.01 |
materialSurfaceBumps | boolean | false | 표면 요철 / 균열 노치 |
materialCrystals | boolean | true | 결정 요철 |
crystalBump | number | 0.01 | 결정 범프 0–1 단계 0.01 |
crystalScale | number | 4 | 결정 스케일 4–80 단계 1 |
materialGrain | boolean | true | 입자 요철 |
materialGrainAmount | number | 0.47 | 입자 강도 0–2 단계 0.01 |
materialGrainScale | number | 150 | 입자 스케일 1–150 단계 1 |
materialCutNormals | boolean | true | 파단 법선 |
materialMicro | boolean | true | 미세 요철 |
microBump | number | 0.445 | 미세 범프 0–1 단계 0.005 |
microScale | number | 10 | 미세 스케일 10–200 단계 1 |
microCoverage | number | 0.25 | 미세 커버리지 0–1 단계 0.01 |
bumpMaskScale | number | 1.45 | 마스크 스케일 0.1–6 단계 0.05 |
materialRipples | boolean | true | 리플 |
rippleBump | number | 0.22 | 리플 범프 0–1 단계 0.01 |
rippleScale | number | 23 | 리플 스케일 2–30 단계 0.5 |
materialSmudges | boolean | true | 얼룩 |
smudgeAmount | number | 0.78 | 양 0–1 단계 0.01 |
smudgeCoverage | number | 0.58 | 커버리지 0–1 단계 0.01 |
smudgeMaskScale | number | 1.85 | 마스크 스케일 0.1–6 단계 0.05 |
smudgeAnisotropy | number | 16.5 | 이방성 1–20 단계 0.5 |
smudgeRoughness | number | 0.75 | 거칠기 0–1 단계 0.01 |
smudgeWhiteness | number | 0.035 | 백색도 0–0.5 단계 0.005 |
smudgeScale | number | 1.3 | 스케일 0.5–10 단계 0.1 |
materialCracks | boolean | true | 균열 |
crackLargeScale | number | 2.45 | 큰 스케일 0.3–8 단계 0.05 |
crackWarp | number | 0.22 | 왜곡 0–1.5 단계 0.01 |
crackCoverage | number | 0.19 | 커버리지 0–1 단계 0.01 |
crackRegionScale | number | 1.8 | 영역 스케일 0.1–4 단계 0.05 |
crackRegionCoverage | number | 0.6 | 영역 커버리지 0–1 단계 0.01 |
veinScale | number | 8 | 맥 스케일 1–20 단계 0.25 |
veinContrast | number | 0.55 | 맥 대비 0–1 단계 0.01 |
crackWidth | number | 0.0025 | 너비 0.0005–0.02 단계 0.0005 |
crackBrightness | number | 0.65 | 밝기 0–3 단계 0.01 |
crackDarkness | number | 0.69 | 어두움 0–1 단계 0.01 |
crackRefraction | number | 0.076 | 굴절 0–0.1 단계 0.001 |
crackSurfaceStrength | number | 0.16 | 표면 강도 0–1 단계 0.01 |
fineScale | number | 18.4 | 미세 스케일 2–20 단계 0.1 |
fineAmount | number | 0.52 | 미세 양 0–1 단계 0.01 |
fineCoverage | number | 1 | 미세 커버리지 0–1 단계 0.01 |
materialScatter | boolean | true | 내부 산란 |
materialInclusionScale | number | 0.05 | 포함물 스케일 0.05–3 단계 0.01 |
materialInclusionAmount | number | 2 | 사진 포함물 0–2 단계 0.01 |
interiorScatter | number | 0.09 | 내부 산란 0–1 단계 0.01 |
materialClearcoat | boolean | true | 클리어코트 |
clearcoat | number | 0 | 클리어코트 0–1 단계 0.01 |