프로스트 시퀀스 카메라 궤도
완전한 22.5초 얼음 시퀀스: 로고, 첫 번째 텍스트, 두 번째 텍스트, 분열, 페이드아웃. 카메라는 고정된 오브젝트 주위를 궤도로 돌며, 읽기 쉽도록 전면을 더 느리게 통과합니다. 동일한 파티클 필드가 각 전환을 연결합니다. 두 개의 텍스트 순간과 SVG 로고를 사용자 정의할 수 있으며, 소스에는 편집 가능한 카메라 및 조립 타이밍이 포함됩니다.
컴포지션 ID: frost-sequence-rig. 30fps, 1920×1080에서 22.5초.
파일
frost-sequence-camera-orbit.html(131KB)assets/example-logo.svg(1KB)assets/fonts/Geist-Bold.ttf(65KB)assets/fonts/Geist-OFL.txt(4KB)assets/fonts/Geist-Regular.ttf(65KB)assets/fonts/Geist-SemiBold.ttf(65KB)assets/frost.js(1.5MB)assets/Three-LICENSE.txt(1KB)assets/ThreeMeshBVH-LICENSE.txt(1KB)assets/OpentypeJS-LICENSE.txt(1KB)assets/Clipper-LICENSE.txt(3KB)assets/gsap-3.14.2.min.js(128KB)assets/GSAP-NOTICE.txt(1KB)assets/logo.svg(1KB)assets/shards-atlas.png(설치 시 CDN에서 가져옴)assets/test-mark.svg(1KB)assets/textures/bluenoise64.png(12KB)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 | 문자열 | `"깨지기 | 쉬운."` |
headline2 | 문자열 | `"기억하기 | 쉬운."` |
logoUrl | 문자열 | "assets/logo.svg" | 로고 SVG 자산 경로 (자산에 업로드 후 경로 붙여넣기) 최대 200자 |
assemblyMode | 열거형 | "hybrid" | 조립 응답 (물리적 |
materialBaseColor | 색상 | "#ffffff" | 기본 색상 |
baseRoughness | 숫자 | 0.31 | 기본 거칠기 0–0.5 간격 0.005 |
materialTransmission | 부울 | true | 투과 |
materialBacklight | 숫자 | 0.27 | 얼음을 통한 역광 0–2 간격 0.01 |
ior | 숫자 | 1.675 | 굴절률 1–2 간격 0.005 |
thicknessScale | 숫자 | 2.04 | 두께 배율 0.1–3 간격 0.01 |
materialAbsorption | 부울 | true | 흡수/색조 |
attenuationColor | 색상 | "#d5f4ff" | 감쇠 색상 (흰색 = 흡수 없음, 투명 유리) |
attenuationDistance | 숫자 | 6.54 | 감쇠 거리 0.05–12 간격 0.01 |
materialDispersion | 부울 | false | 분산 |
dispersion | 숫자 | 0.12 | 분산 (0 = 꺼짐; 켜기/끄기 시 다시 로드) 0–0.3 간격 0.005 |
materialReflections | 부울 | true | 반사 |
envIntensity | 숫자 | 2.04 | 환경 강도 0–3 간격 0.01 |
specularIntensity | 숫자 | 1.44 | 반사광 강도 0–2 간격 0.01 |
materialFrost | 부울 | true | 성에 |
materialInteriorFrost | 숫자 | 0 | 균일한 성에 0–1 간격 0.01 |
frostScale | 숫자 | 0.7 | 배율 0.2–6 간격 0.05 |
frostThreshold | 숫자 | 0.62 | 임계값 (1 = 성에 없음, 투명 유리) 0–1 간격 0.01 |
frostSoftness | 숫자 | 0.24 | 부드러움 0.01–1 간격 0.01 |
frostRoughness | 숫자 | 0.73 | 거칠기 0–1 간격 0.01 |
frostDiffuse | 숫자 | 0.11 | 확산 (성에 영역이 잡는 빛의 양) 0–1 간격 0.01 |
materialSurfaceBumps | 부울 | false | 개체 표면 돌기/균열 노치 |
materialCrystals | 부울 | true | 결정 돌기 |
crystalBump | 숫자 | 0.01 | 결정 돌기 0–1 간격 0.01 |
crystalScale | 숫자 | 4 | 결정 배율 4–80 간격 1 |
materialGrain | 부울 | true | 입자 돌기 |
materialGrainAmount | 숫자 | 0.47 | 입자 강도 0–2 간격 0.01 |
materialGrainScale | 숫자 | 150 | 입자 배율 1–150 간격 1 |
materialCutNormals | 부울 | true | 파단 법선 |
materialMicro | 부울 | true | 미세 돌기 |
microBump | 숫자 | 0.445 | 미세 돌기 0–1 간격 0.005 |
microScale | 숫자 | 10 | 미세 배율 10–200 간격 1 |
microCoverage | 숫자 | 0.25 | 미세 적용 범위 0–1 간격 0.01 |
bumpMaskScale | 숫자 | 1.45 | 마스크 배율 0.1–6 간격 0.05 |
materialRipples | 부울 | true | 잔물결 |
rippleBump | 숫자 | 0.22 | 잔물결 돌기 0–1 간격 0.01 |
rippleScale | 숫자 | 23 | 잔물결 배율 2–30 간격 0.5 |
materialSmudges | 부울 | true | 얼룩 |
smudgeAmount | 숫자 | 0.78 | 양 0–1 간격 0.01 |
smudgeCoverage | 숫자 | 0.58 | 적용 범위 0–1 간격 0.01 |
smudgeMaskScale | 숫자 | 1.85 | 마스크 배율 0.1–6 간격 0.05 |
smudgeAnisotropy | 숫자 | 16.5 | 이방성 1–20 간격 0.5 |
smudgeRoughness | 숫자 | 0.75 | 거칠기 0–1 간격 0.01 |
smudgeWhiteness | 숫자 | 0.035 | 백색도 0–0.5 간격 0.005 |
smudgeScale | 숫자 | 1.3 | 배율 0.5–10 간격 0.1 |
materialCracks | 부울 | true | 균열 |
crackLargeScale | 숫자 | 2.45 | 큰 배율 0.3–8 간격 0.05 |
crackWarp | 숫자 | 0.22 | 뒤틀림 0–1.5 간격 0.01 |
crackCoverage | 숫자 | 0.19 | 적용 범위 0–1 간격 0.01 |
crackRegionScale | 숫자 | 1.8 | 영역 배율 0.1–4 간격 0.05 |
crackRegionCoverage | 숫자 | 0.6 | 영역 적용 범위 0–1 간격 0.01 |
veinScale | 숫자 | 8 | 줄무늬 배율 1–20 간격 0.25 |
veinContrast | 숫자 | 0.55 | 줄무늬 대비 0–1 간격 0.01 |
crackWidth | 숫자 | 0.0025 | 너비 0.0005–0.02 간격 0.0005 |
crackBrightness | 숫자 | 0.65 | 밝기 0–3 간격 0.01 |
crackDarkness | 숫자 | 0.69 | 어두움 0–1 간격 0.01 |
crackRefraction | 숫자 | 0.076 | 굴절 0–0.1 간격 0.001 |
crackSurfaceStrength | 숫자 | 0.16 | 표면 강도 0–1 간격 0.01 |
fineScale | 숫자 | 18.4 | 미세 배율 2–20 간격 0.1 |
fineAmount | 숫자 | 0.52 | 미세 양 0–1 간격 0.01 |
fineCoverage | 숫자 | 1 | 미세 적용 범위 0–1 간격 0.01 |
materialScatter | 부울 | true | 내부 산란 |
materialInclusionScale | 숫자 | 0.05 | 혼입물 배율 0.05–3 간격 0.01 |
materialInclusionAmount | 숫자 | 2 | 사진 혼입물 0–2 간격 0.01 |
interiorScatter | 숫자 | 0.09 | 내부 산란 0–1 간격 0.01 |
materialClearcoat | 부울 | true | 클리어코트 |
clearcoat | 숫자 | 0 | 클리어코트 0–1 간격 0.01 |
clearcoatRoughness | 숫자 | 0.12 | 클리어코트 거칠기 0–1 간격 0.01 |
fresnelPower | 숫자 | 3.3 | 프레넬 거듭제곱 0–5 간격 0.05 |
materialCaustics | 부울 | true | 코스틱스 |
causticsIntensity | 숫자 | 0.36 | 코스틱스 강도 0–1 간격 0.01 |
causticsSpread | 숫자 | 11.3 | 코스틱스 확산 1–20 간격 0.1 |
causticsCount | 숫자 | 8 | 코스틱스 개수 1–20 간격 1 |
materialEdgeHighlight | 부울 | true | 모서리 하이라이트 |
edgeHighlightIntensity | 숫자 | 0.26 | 모서리 하이라이트 강도 0–1 간격 0.01 |
edgeHighlightWidth | 숫자 | 0.62 | 모서리 하이라이트 너비 0–2 간격 0.01 |
materialShadow | 부울 | true | 그림자 |
shadowIntensity | 숫자 | 0.19 | 그림자 강도 0–1 간격 0.01 |
shadowOpacity | 숫자 | 0.31 | 그림자 불투명도 0–1 간격 0.01 |
shadowBlur | 숫자 | 11.2 | 그림자 블러 1–30 간격 0.1 |
shadowFar | 숫자 | 2.9 | 그림자 원거리 1–10 간격 0.1 |
shadowInset | 숫자 | 0.94 | 그림자 내부 오프셋 0–2 간격 0.01 |
shadowColor | 색상 | "#a6daff" | 그림자 색상 |
backgroundEnabled | 부울 | true | 배경 사용 |
backgroundType | 열거형 | "gradient" | 배경 유형 (그라디언트 |
backgroundGradientTop | 색상 | "#000000" | 배경 그라디언트 상단 |
backgroundGradientBottom | 색상 | "#1b1b2d" | 배경 그라디언트 하단 |
backgroundSolidColor | 색상 | "#1b1b2d" | 배경 솔리드 색상 |
backgroundImageUrl | 문자열 | "" | 배경 이미지 URL |
backgroundLensFlare | 부울 | true | 배경 렌즈 플레어 |
lensFlareIntensity | 숫자 | 0.27 | 렌즈 플레어 강도 0–0.5 간격 0.005 |
particlesEnabled | 부울 | true | 입자 사용 |
particleCount | 숫자 | 260 | 입자 개수 80–1800 간격 10 |
particleScale | 숫자 | 0.7 | 입자 배율 0.2–2 간격 0.05 |
particleOpacity | 숫자 | 0.57 | 입자 불투명도 0–1 간격 0.01 |
particleColor | 색상 | "#ffffff" | 입자 색상 |
particleSpeed | 숫자 | 0.15 | 입자 속도 0.01–0.5 간격 0.01 |
particleNoise | 숫자 | 0.33 | 입자 노이즈 0.01–1 간격 0.01 |
particleTurbulence | 숫자 | 0.44 | 입자 난류 0.01–1 간격 0.01 |
particleGlow | 부울 | true | 입자 광채 |
particleGlowIntensity | 숫자 | 0.25 | 입자 광채 강도 0–1 간격 0.01 |
particleGlowSize | 숫자 | 1.5 | 입자 광채 크기 0.5–3 간격 0.05 |
sceneFogEnabled | 부울 | true | 씬 안개 사용 |
fogColor | 색상 | "#1b1b2d" | 안개 색상 |
fogNear | 숫자 | 2.5 | 안개 근거리 0–10 간격 0.1 |
fogFar | 숫자 | 7.8 | 안개 원거리 0–20 간격 0.1 |
logoAnimationEnabled | 부울 | true | 로고 애니메이션 사용 |
logoAnimationType | 열거형 | "rotate" | 로고 애니메이션 유형 (회전 |
logoAnimationSpeed | 숫자 | 0.25 | 로고 애니메이션 속도 0–1 간격 0.01 |
logoAnimationAmplitude | 숫자 | 0.15 | 로고 애니메이션 진폭 0–0.5 간격 0.005 |
textAnimationEnabled | 부울 | true | 텍스트 애니메이션 사용 |
textAnimationType | 열거형 | "slide" | 텍스트 애니메이션 유형 (슬라이드 |
textAnimationDuration | 숫자 | 1.2 | 텍스트 애니메이션 지속 시간 0.3–3 간격 0.1 |
textAnimationEase | 문자열 | "power2.out" | 텍스트 애니메이션 이징 (GSAP 문자열) |
cameraOrbitEnabled | 부울 | true | 카메라 궤도 사용 |
cameraOrbitRadius | 숫자 | 4.5 | 카메라 궤도 반경 2–10 간격 0.5 |
cameraOrbitSpeed | 숫자 | 0.15 | 카메라 궤도 속도 0.05–0.4 간격 0.01 |
cameraOrbitStartAngle | 숫자 | 0 | 카메라 궤도 시작 각도 (도) 0–360 간격 1 |
cameraOrbitEndAngle | 숫자 | 360 | 카메라 궤도 종료 각도 (도) 0–360 간격 1 |
cameraOrbitTilt | 숫자 | 15 | 카메라 궤도 기울기 (도) -30–30 간격 1 |
cameraOrbitLookAt | 문자열 | "center" | 카메라 궤도 시점 (중심 |
cameraSlowPassEnabled | 부울 | true | 느린 통과 사용 |
cameraSlowPassDuration | 숫자 | 2.5 | 느린 통과 지속 시간 1–5 간격 0.5 |
cameraSlowPassAngle | 숫자 | 180 | 느린 통과 각도 (도) 0–360 간격 1 |
cameraSlowPassEase | 문자열 | "power1.inOut" | 느린 통과 이징 (GSAP 문자열) |
breakupEnabled | 부울 | true | 분열 사용 |
breakupStart | 숫자 | 0.45 | 분열 시작 (0–1 비율) 0–1 간격 0.01 |
breakupDuration | 숫자 | 0.3 | 분열 지속 시간 (초) 0.1–1 간격 0.05 |
breakupIntensity | 숫자 | 0.8 | 분열 강도 0–1 간격 0.01 |
breakupChaos | 숫자 | 0.35 | 분열 혼란 0–1 간격 0.01 |
breakupDirection | 열거형 | "outward" | 분열 방향 (바깥쪽 |
reformEnabled | 부울 | true | 재구성 사용 |
reformStart | 숫자 | 0.6 | 재구성 시작 (0–1 비율) 0–1 간격 0.01 |
reformDuration | 숫자 | 0.4 | 재구성 지속 시간 (초) 0.1–1 간격 0.05 |
reformSmoothness | 숫자 | 0.7 | 재구성 부드러움 0–1 간격 0.01 |
reformTarget | 열거형 | "next" | 재구성 대상 (다음 텍스트 |
fadeOutEnabled | 부울 | true | 페이드아웃 사용 |
fadeOutStart | 숫자 | 0.85 | 페이드아웃 시작 (0–1 비율) 0–1 간격 0.01 |
fadeOutDuration | 숫자 | 0.15 | 페이드아웃 지속 시간 (초) 0.05–0.5 간격 0.05 |
fadeOutColor | 색상 | "#000000" | 페이드아웃 색상 |
fadeOutEase | 문자열 | "power2.in" | 페이드아웃 이징 (GSAP 문자열) |
globalVolume | 숫자 | 1 | 글로벌 볼륨 0–1 간격 0.01 |
globalMute | 부울 | false | 글로벌 음소거 |
trackIndex | 숫자 | 1 | 트랙 인덱스 0–10 간격 1 |
version | 문자열 | "1.0.0" | 버전 |