Frost-Sequenz Kameraumlauf
Eine vollständige 22,5-sekündige Eissequenz: Logo, erster Text, zweiter Text, Zerbrechen und Ausblenden. Die Kamera umkreist die festen Objekte mit langsameren frontalen Durchgängen zum Lesen. Das gleiche Partikelfeld trägt jeden Übergang. Passen Sie die beiden Textmomente und das SVG-Logo an; die Quelle enthält editierbares Kamera- und Montage-Timing.
Kompositions-ID: frost-sequence-rig. Dauer 22,5 s bei 30 fps, 1920×1080.
Dateien
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(vom CDN bei der Installation abgerufen)assets/test-mark.svg(1 KB)assets/textures/bluenoise64.png(12 KB)assets/textures/ice-inclusions-generated.png(vom CDN bei der Installation abgerufen)
Installation
Installation mit npx hyperframes add frost-sequence-camera-orbit; standardmäßig landen die obigen Dateien unter compositions/frost-sequence-camera-orbit/. Binden Sie den Block dann aus der host-index.html ein:
<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>
Rendern mit benutzerdefinierten Werten, indem Sie die Kompositionsdatei direkt ansprechen:
npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Schwer zu|zerbrechen.","headline2":"Leicht zu|merken."}'
Variablen
Zur Laufzeit über window.__hyperframes.getVariables() ausgelesen; auf dem Kompositionsstamm als data-composition-variables deklariert (einfach quotiertes Attribut, reines JSON).
| id | Typ | Standard | Beschriftung / Bereich |
|---|---|---|---|
headline1 | string | `"Schwer zu | brechen."` |
headline2 | string | `"Leicht zu | merken."` |
logoUrl | string | "assets/logo.svg" | Pfad zur Logo-SVG-Datei (in Assets hochladen, dann Pfad einfügen) max. 200 Zeichen |
assemblyMode | enum | "hybrid" | Montageantwort (physisch |
materialBaseColor | color | "#ffffff" | Basisfarbe |
baseRoughness | number | 0,31 | Basisrauheit 0–0,5 Schritt 0,005 |
materialTransmission | boolean | true | Transmission |
materialBacklight | number | 0,27 | Hintergrundbeleuchtung durch Eis 0–2 Schritt 0,01 |
ior | number | 1,675 | Brechungsindex 1–2 Schritt 0,005 |
thicknessScale | number | 2,04 | Dickenmaßstab 0,1–3 Schritt 0,01 |
materialAbsorption | boolean | true | Absorption / Tönung |
attenuationColor | color | "#d5f4ff" | Dämpfungsfarbe (weiß = keine Absorption, klares Glas) |
attenuationDistance | number | 6,54 | Dämpfungsdistanz 0,05–12 Schritt 0,01 |
materialDispersion | boolean | false | Dispersion |
dispersion | number | 0,12 | Dispersion (0 = aus; an/aus lädt neu) 0–0,3 Schritt 0,005 |
materialReflections | boolean | true | Reflexionen |
envIntensity | number | 2,04 | Umgebungsintensität 0–3 Schritt 0,01 |
specularIntensity | number | 1,44 | Spiegelintensität 0–2 Schritt 0,01 |
materialFrost | boolean | true | Frost |
materialInteriorFrost | number | 0 | Gleichmäßiger Frost 0–1 Schritt 0,01 |
frostScale | number | 0,7 | Maßstab 0,2–6 Schritt 0,05 |
frostThreshold | number | 0,62 | Schwelle (1 = kein Frost, klares Glas) 0–1 Schritt 0,01 |
frostSoftness | number | 0,24 | Weichheit 0,01–1 Schritt 0,01 |
frostRoughness | number | 0,73 | Rauheit 0–1 Schritt 0,01 |
frostDiffuse | number | 0,11 | Diffus (wie viel Licht frostige Bereiche einfangen) 0–1 Schritt 0,01 |
materialSurfaceBumps | boolean | false | Oberflächenerhebungen / Risskerben |
materialCrystals | boolean | true | Kristallerhebungen |
crystalBump | number | 0,01 | Kristallerhebung 0–1 Schritt 0,01 |
crystalScale | number | 4 | Kristallmaßstab 4–80 Schritt 1 |
materialGrain | boolean | true | Körnungserhebungen |
materialGrainAmount | number | 0,47 | Kornstärke 0–2 Schritt 0,01 |
materialGrainScale | number | 150 | Kornmaßstab 1–150 Schritt 1 |
materialCutNormals | boolean | true | Bruchnormalen |
materialMicro | boolean | true | Mikroerhebungen |
microBump | number | 0,445 | Mikroerhebung 0–1 Schritt 0,005 |
microScale | number | 10 | Mikromaßstab 10–200 Schritt 1 |
microCoverage | number | 0,25 | Mikroabdeckung 0–1 Schritt 0,01 |
bumpMaskScale | number | 1,45 | Maskenmaßstab 0,1–6 Schritt 0,05 |
materialRipples | boolean | true | Wellen |
rippleBump | number | 0,22 | Wellenerhebung 0–1 Schritt 0,01 |
rippleScale | number | 23 | Wellenmaßstab 2–30 Schritt 0,5 |
materialSmudges | boolean | true | Schlieren |
smudgeAmount | number | 0,78 | Menge 0–1 Schritt 0,01 |
smudgeCoverage | number | 0,58 | Abdeckung 0–1 Schritt 0,01 |
smudgeMaskScale | number | 1,85 | Maskenmaßstab 0,1–6 Schritt 0,05 |
smudgeAnisotropy | number | 16,5 | Anisotropie 1–20 Schritt 0,5 |
smudgeRoughness | number | 0,75 | Rauheit 0–1 Schritt 0,01 |
smudgeWhiteness | number | 0,035 | Weißgrad 0–0,5 Schritt 0,005 |
smudgeScale | number | 1,3 | Maßstab 0,5–10 Schritt 0,1 |
materialCracks | boolean | true | Risse |
crackLargeScale | number | 2,45 | Großer Maßstab 0,3–8 Schritt 0,05 |
crackWarp | number | 0,22 | Verzerrung 0–1,5 Schritt 0,01 |
crackCoverage | number | 0,19 | Abdeckung 0–1 Schritt 0,01 |
crackRegionScale | number | 1,8 | Bereichsmaßstab 0,1–4 Schritt 0,05 |
crackRegionCoverage | number | 0,6 | Bereichsabdeckung 0–1 Schritt 0,01 |
veinScale | number | 8 | Ader-Maßstab 1–20 Schritt 0,25 |
veinContrast | number | 0,55 | Ader-Kontrast 0–1 Schritt 0,01 |
crackWidth | number | 0,0025 | Breite 0,0005–0,02 Schritt 0,0005 |
crackBrightness | number | 0,65 | Helligkeit 0–3 Schritt 0,01 |
crackDarkness | number | 0,69 | Dunkelheit 0–1 Schritt 0,01 |
crackRefraction | number | 0,076 | Brechung 0–0,1 Schritt 0,001 |
crackSurfaceStrength | number | 0,16 | Oberflächenstärke 0–1 Schritt 0,01 |
fineScale | number | 18,4 | Feinmaßstab 2–20 Schritt 0,1 |
fineAmount | number | 0,52 | Feinputz 0–1 Schritt 0,01 |
fineCoverage | number | 1 | Feinabdeckung 0–1 Schritt 0,01 |
materialScatter | boolean | true | Interne Streuung |
materialInclusionScale | number | 0,05 | Einschluss-Maßstab 0,05–3 Schritt 0,01 |
materialInclusionAmount | number | 2 | Fotografische Einschlüsse 0–2 Schritt 0,01 |
interiorScatter | number | 0,09 | Interne Streuung 0–1 Schritt 0,01 |
materialClearcoat | boolean | true | Klarlack |
clearcoat | number | 0 | Klarlack 0–1 Schritt 0,01 |
(Tabelle aus Platzgründen abgeschnitten; vollständige Variableliste in der Originaldatei)