フロストシーケンス カメラオービット
22.5秒の氷のシーケンス：ロゴ、最初のテキスト、2番目のテキスト、破壊、フェードアウト。カメラは固定されたオブジェクトを周回し、読みやすいように正面通過時に減速します。同じパーティクルフィールドが各トランジションを担います。2つのテキストモーメントとSVGロゴをカスタマイズ可能。ソースには編集可能なカメラとアセンブリのタイミングが含まれています。
コンポジションID：frost-sequence-rig。持続時間22.5秒、30fps、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":"Hard to|break.","headline2":"Easy to|remember."}'
変数
実行時に window.__hyperframes.getVariables() で読み取られます。コンポジションルートに data-composition-variables 属性（シングルクォートで囲まれたプレーンなJSON）として宣言されています。
| id | type | default | label / range |
|---|---|---|---|
headline1 | string | `"Hard to | break."` |
headline2 | string | `"Easy to | remember."` |
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 |
...（以降、後続の変数定義が続きますが、翻訳の都合上、一部を省略しています）