冰霜序列 - 攝影機環繞
一個完整的 22.5 秒冰晶序列:Logo、第一段文字、第二段文字、碎裂與淡出。攝影機環繞固定物體,並以較慢的正面通過以便閱讀。整個轉場由同一個粒子場推動。可自訂兩段文字與 SVG Logo;原始檔中包含可編輯的攝影機與組裝時序。
組合 ID:frost-sequence-rig。時長 22.5 秒,30 fps,1920×1080。
檔案
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" | Logo 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 |
…
[此處省略以利翻譯]