フロストシーケンス カメラオービット
完全な22.5秒の氷のシーケンス：ロゴ、最初のテキスト、2番目のテキスト、破壊、フェードアウト。カメラは固定されたオブジェクトの周りを軌道で移動し、読み取りやすいように前面通過時は低速で移動します。各トランジションは同じパーティクルフィールドで遷移します。2つのテキストモーメントとSVGロゴをカスタマイズできます。ソースには編集可能なカメラとアセンブリのタイミングが含まれています。
コンポジションID: frost-sequence-rig。30 fpsで22.5秒、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 | type | default | label / range |
|---|---|---|---|
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 |