Frost-Sequenz Kamera-Umlaufbahn
Eine vollständige 22,5-Sekunden-Eissequenz: Logo, erster Text, zweiter Text, Zerfall und Ausblendung. Die Kamera umkreist die festen Objekte mit langsameren frontalen Durchgängen zum Lesen. Das gleiche Partikelfeld trägt jeden Übergang. Passen Sie die beiden Text-Momente und das SVG-Logo an; die Quelle enthält editierbare Kamera- und Assembly-Timings.
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
Installieren Sie mit npx hyperframes add frost-sequence-camera-orbit; standardmäßig landen die obigen Dateien unter compositions/frost-sequence-camera-orbit/. Binden Sie dann den Block von der Host-Datei index.html aus 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 Sie 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":"Hart zu|brechen.","headline2":"Einfach zu|behalten."}'
Variablen
Zur Laufzeit über window.__hyperframes.getVariables() gelesen; auf dem Kompositionsstamm als data-composition-variables deklariert (einfaches Anführungszeichen-Attribut, reines JSON).
| id | Typ | Standard | Beschriftung / Bereich |
|---|---|---|---|
headline1 | string | `"Hart zu | brechen."` |
headline2 | string | `"Einfach zu | behalten."` |
logoUrl | string | "assets/logo.svg" | Pfad zur Logo-SVG-Datei (in Assets hochladen, dann Pfad einfügen) max. 200 Zeichen |
assemblyMode | enum | "hybrid" | Assembly-Modus (physikalisch |
materialBaseColor | color | "#ffffff" | Basisfarbe |
baseRoughness | number | 0,31 | Basis-Rauheit 0–0,5 Schritt 0,005 |
materialTransmission | boolean | true | Transmission |
materialBacklight | number | 0,27 | Hintergrundlicht 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 / Einfärbung |
attenuationColor | color | "#d5f4ff" | Abschwächungsfarbe (weiß = keine Absorption, klares Glas) |
attenuationDistance | number | 6,54 | Abschwächungsdistanz 0,05–12 Schritt 0,01 |
materialDispersion | boolean | false | Dispersion |
dispersion | number | 0,12 | Dispersion (0 = aus; ein/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 | Spiegelungsintensitä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 Frostflächen einfangen) 0–1 Schritt 0,01 |
materialSurfaceBumps | boolean | false | Oberflächenbumps / Risskerben |
materialCrystals | boolean | true | Kristallbumps |
crystalBump | number | 0,01 | Kristallbump 0–1 Schritt 0,01 |
crystalScale | number | 4 | Kristallmaßstab 4–80 Schritt 1 |
materialGrain | boolean | true | Kornbumps |
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 | Mikrobumps |
microBump | number | 0,445 | Mikrobump 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 | Wellenbump 0–1 Schritt 0,01 |
rippleScale | number | 23 | Wellenmaßstab 2–30 Schritt 0,5 |
materialSmudges | boolean | true | Schmierer |
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 | Adernmaßstab 1–20 Schritt 0,25 |
veinContrast | number | 0,55 | Adernkontrast 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 | Feine Menge 0–1 Schritt 0,01 |
fineCoverage | number | 1 | Feine Abdeckung 0–1 Schritt 0,01 |
materialScatter | boolean | true | Interne Streuung |
materialInclusionScale | number | 0,05 | Einschlussmaßstab 0,05–3 Schritt 0,01 |
materialInclusionAmount | number | 2 | Fotografische Einschlüsse 0–2 Schritt 0,01 |
interiorScatter | number | 0,09 | Innere Streuung 0–1 Schritt 0,01 |
materialClearcoat | boolean | true | Klarlack |
clearcoat | number | 0 | Klarlack 0–1 Schritt 0,01 |