Séquence de Givre - Orbite de Caméra
Une séquence de glace complète de 22,5 secondes : logo, premier texte, deuxième texte, rupture et fondu. La caméra orbite autour des objets fixes avec des passages frontaux plus lents pour la lecture. Le même champ de particules assure chaque transition. Personnalisez les deux moments de texte et le logo SVG ; la source inclut le timing modifiable de la caméra et de l'assemblage.
Identifiant de composition : frost-sequence-rig. Durée 22,5 s à 30 ips, 1920×1080.
Fichiers
frost-sequence-camera-orbit.html(131 Ko)assets/example-logo.svg(1 Ko)assets/fonts/Geist-Bold.ttf(65 Ko)assets/fonts/Geist-OFL.txt(4 Ko)assets/fonts/Geist-Regular.ttf(65 Ko)assets/fonts/Geist-SemiBold.ttf(65 Ko)assets/frost.js(1,5 Mo)assets/Three-LICENSE.txt(1 Ko)assets/ThreeMeshBVH-LICENSE.txt(1 Ko)assets/OpentypeJS-LICENSE.txt(1 Ko)assets/Clipper-LICENSE.txt(3 Ko)assets/gsap-3.14.2.min.js(128 Ko)assets/GSAP-NOTICE.txt(1 Ko)assets/logo.svg(1 Ko)assets/shards-atlas.png(récupéré depuis le CDN à l'installation)assets/test-mark.svg(1 Ko)assets/textures/bluenoise64.png(12 Ko)assets/textures/ice-inclusions-generated.png(récupéré depuis le CDN à l'installation)
Installation
Installez avec npx hyperframes add frost-sequence-camera-orbit ; par défaut, les fichiers ci-dessus se trouvent sous compositions/frost-sequence-camera-orbit/. Montez ensuite le bloc depuis le fichier index.html hôte :
<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>
Rendez avec des valeurs personnalisées en ciblant directement le fichier de composition :
npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Difficile à|casser.","headline2":"Facile à|retenir."}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition comme attribut data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | défaut | label / plage |
|---|---|---|---|
headline1 | string | `"Difficile à | casser."` |
headline2 | string | `"Facile à | retenir."` |
logoUrl | string | "assets/logo.svg" | Chemin de l'actif SVG du logo (téléchargez dans Actifs, puis collez le chemin) max 200 car. |
assemblyMode | enum | "hybrid" | Réponse d'assemblage (physique |
materialBaseColor | couleur | "#ffffff" | Couleur de base |
baseRoughness | nombre | 0.31 | Rugosité de base 0–0.5 pas 0.005 |
materialTransmission | bool | true | Transmission |
materialBacklight | nombre | 0.27 | Rétroéclairage à travers la glace 0–2 pas 0.01 |
ior | nombre | 1.675 | Indice de réfraction 1–2 pas 0.005 |
thicknessScale | nombre | 2.04 | Échelle d'épaisseur 0.1–3 pas 0.01 |
materialAbsorption | bool | true | Absorption/teinte |
attenuationColor | couleur | "#d5f4ff" | Couleur d'atténuation (blanc = pas d'absorption, verre clair) |
attenuationDistance | nombre | 6.54 | Distance d'atténuation 0.05–12 pas 0.01 |
materialDispersion | bool | false | Dispersion |
dispersion | nombre | 0.12 | Dispersion (0 = désactivé ; activé/désactivé recharge) 0–0.3 pas 0.005 |
materialReflections | bool | true | Réflexions |
envIntensity | nombre | 2.04 | Intensité d'environnement 0–3 pas 0.01 |
specularIntensity | nombre | 1.44 | Intensité spéculaire 0–2 pas 0.01 |
materialFrost | bool | true | Givre |
materialInteriorFrost | nombre | 0 | Givre uniforme 0–1 pas 0.01 |
frostScale | nombre | 0.7 | Échelle 0.2–6 pas 0.05 |
frostThreshold | nombre | 0.62 | Seuil (1 = pas de givre, verre clair) 0–1 pas 0.01 |
frostSoftness | nombre | 0.24 | Douceur 0.01–1 pas 0.01 |
frostRoughness | nombre | 0.73 | Rugosité 0–1 pas 0.01 |
frostDiffuse | nombre | 0.11 | Diffus (lumière captée par les zones givrées) 0–1 pas 0.01 |
materialSurfaceBumps | bool | false | Reliefs de surface / entailles de fissure |
materialCrystals | bool | true | Reliefs de cristaux |
crystalBump | nombre | 0.01 | Relief cristallin 0–1 pas 0.01 |
crystalScale | nombre | 4 | Échelle des cristaux 4–80 pas 1 |
materialGrain | bool | true | Reliefs de grain |
materialGrainAmount | nombre | 0.47 | Force du grain 0–2 pas 0.01 |
materialGrainScale | nombre | 150 | Échelle du grain 1–150 pas 1 |
materialCutNormals | bool | true | Normales de fracture |
materialMicro | bool | true | Micro-reliefs |
microBump | nombre | 0.445 | Micro-relief 0–1 pas 0.005 |
microScale | nombre | 10 | Échelle micro 10–200 pas 1 |
microCoverage | nombre | 0.25 | Couverture micro 0–1 pas 0.01 |
bumpMaskScale | nombre | 1.45 | Échelle du masque de relief 0.1–6 pas 0.05 |
materialRipples | bool | true | Ondulations |
rippleBump | nombre | 0.22 | Relief d'ondulation 0–1 pas 0.01 |
rippleScale | nombre | 23 | Échelle d'ondulation 2–30 pas 0.5 |
materialSmudges | bool | true | Traces / empreintes |
smudgeAmount | nombre | 0.78 | Quantité 0–1 pas 0.01 |
smudgeCoverage | nombre | 0.58 | Couverture 0–1 pas 0.01 |
smudgeMaskScale | nombre | 1.85 | Échelle du masque 0.1–6 pas 0.05 |
smudgeAnisotropy | nombre | 16.5 | Anisotropie 1–20 pas 0.5 |
smudgeRoughness | nombre | 0.75 | Rugosité 0–1 pas 0.01 |
smudgeWhiteness | nombre | 0.035 | Blancheur 0–0.5 pas 0.005 |
smudgeScale | nombre | 1.3 | Échelle 0.5–10 pas 0.1 |
materialCracks | bool | true | Fissures |
crackLargeScale | nombre | 2.45 | Grande échelle 0.3–8 pas 0.05 |
crackWarp | nombre | 0.22 | Déformation 0–1.5 pas 0.01 |
crackCoverage | nombre | 0.19 | Couverture 0–1 pas 0.01 |
crackRegionScale | nombre | 1.8 | Échelle de région 0.1–4 pas 0.05 |
crackRegionCoverage | nombre | 0.6 | Couverture de région 0–1 pas 0.01 |
veinScale | nombre | 8 | Échelle des veines 1–20 pas 0.25 |
veinContrast | nombre | 0.55 | Contraste des veines 0–1 pas 0.01 |
crackWidth | nombre | 0.0025 | Largeur 0.0005–0.02 pas 0.0005 |
crackBrightness | nombre | 0.65 | Luminosité 0–3 pas 0.01 |
crackDarkness | nombre | 0.69 | Obscurité 0–1 pas 0.01 |
crackRefraction | nombre | 0.076 | Réfraction 0–0.1 pas 0.001 |
crackSurfaceStrength | nombre | 0.16 | Force en surface 0–1 pas 0.01 |
fineScale | nombre | 18.4 | Échelle fine 2–20 pas 0.1 |
fineAmount | nombre | 0.52 | Quantité fine 0–1 pas 0.01 |
fineCoverage | nombre | 1 | Couverture fine 0–1 pas 0.01 |
materialScatter | bool | true | Diffusion interne |
materialInclusionScale | nombre | 0.05 | Échelle d'inclusion 0.05–3 pas 0.01 |
materialInclusionAmount | nombre | 2 | Inclusions photographiques 0–2 pas 0.01 |
interiorScatter | nombre | 0.09 | Diffusion intérieure 0–1 pas 0.01 |
materialClearcoat | bool | true | Vernis transparent |
clearcoat | nombre | 0 | Vernis transparent 0–1 pas 0.01 |
…
[tronqué pour la traduction]