Orbite de caméra pour séquence de givre
Une séquence complète de 22,5 secondes sur le thème de la glace : logo, premier texte, second texte, fracture et fondu. La caméra orbite autour des objets fixes avec des passages frontaux plus lents pour permettre la lecture. Le même champ de particules assure la transition entre chaque étape. 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 la 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 sont placés dans 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":"Dur à|casser.","headline2":"Facile à|retenir."}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition comme data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | par défaut | label / plage |
|---|---|---|---|
headline1 | string | `"Dur à | casser."` |
headline2 | string | `"Facile à | retenir."` |
logoUrl | string | "assets/logo.svg" | Chemin de l'actif du logo SVG (téléchargez dans Ressources, puis collez le chemin) max 200 car. |
assemblyMode | enum | "hybrid" | Réponse d'assemblage (physique |
materialBaseColor | color | "#ffffff" | Couleur de base |
baseRoughness | number | 0.31 | Rugosité de base 0–0,5 pas 0,005 |
materialTransmission | boolean | true | Transmission |
materialBacklight | number | 0.27 | Rétroéclairage à travers la glace 0–2 pas 0,01 |
ior | number | 1.675 | Indice de réfraction 1–2 pas 0,005 |
thicknessScale | number | 2.04 | Échelle d'épaisseur 0,1–3 pas 0,01 |
materialAbsorption | boolean | true | Absorption / teinte |
attenuationColor | color | "#d5f4ff" | Couleur d'atténuation (blanc = pas d'absorption, verre clair) |
attenuationDistance | number | 6.54 | Distance d'atténuation 0,05–12 pas 0,01 |
materialDispersion | boolean | false | Dispersion |
dispersion | number | 0.12 | Dispersion (0 = désactivée ; activer/désactiver recharge) 0–0,3 pas 0,005 |
materialReflections | boolean | true | Réflexions |
envIntensity | number | 2.04 | Intensité de l'environnement 0–3 pas 0,01 |
specularIntensity | number | 1.44 | Intensité spéculaire 0–2 pas 0,01 |
materialFrost | boolean | true | Givre |
materialInteriorFrost | number | 0 | Givre uniforme 0–1 pas 0,01 |
frostScale | number | 0.7 | Échelle 0,2–6 pas 0,05 |
frostThreshold | number | 0.62 | Seuil (1 = pas de givre, verre clair) 0–1 pas 0,01 |
frostSoftness | number | 0.24 | Douceur 0,01–1 pas 0,01 |
frostRoughness | number | 0.73 | Rugosité 0–1 pas 0,01 |
frostDiffuse | number | 0.11 | Diffus (combien de lumière les zones givrées captent) 0–1 pas 0,01 |
materialSurfaceBumps | boolean | false | Bosses / encoches de fissure en surface de l'objet |
materialCrystals | boolean | true | Bosses de cristal |
crystalBump | number | 0.01 | Bosse du cristal 0–1 pas 0,01 |
crystalScale | number | 4 | Échelle du cristal 4–80 pas 1 |
materialGrain | boolean | true | Bosses de grain |
materialGrainAmount | number | 0.47 | Force du grain 0–2 pas 0,01 |
materialGrainScale | number | 150 | Échelle du grain 1–150 pas 1 |
materialCutNormals | boolean | true | Normales de fracture |
materialMicro | boolean | true | Micro-bosses |
microBump | number | 0.445 | Micro-bosse 0–1 pas 0,005 |
microScale | number | 10 | Échelle micro 10–200 pas 1 |
microCoverage | number | 0.25 | Couverture micro 0–1 pas 0,01 |
bumpMaskScale | number | 1.45 | Échelle du masque 0,1–6 pas 0,05 |
materialRipples | boolean | true | Ondulations |
rippleBump | number | 0.22 | Bosse d'ondulation 0–1 pas 0,01 |
rippleScale | number | 23 | Échelle d'ondulation 2–30 pas 0,5 |
materialSmudges | boolean | true | Traînées |
smudgeAmount | number | 0.78 | Quantité 0–1 pas 0,01 |
smudgeCoverage | number | 0.58 | Couverture 0–1 pas 0,01 |
smudgeMaskScale | number | 1.85 | Échelle du masque 0,1–6 pas 0,05 |
smudgeAnisotropy | number | 16.5 | Anisotropie 1–20 pas 0,5 |
smudgeRoughness | number | 0.75 | Rugosité 0–1 pas 0,01 |
smudgeWhiteness | number | 0.035 | Blancheur 0–0,5 pas 0,005 |
smudgeScale | number | 1.3 | Échelle 0,5–10 pas 0,1 |
materialCracks | boolean | true | Fissures |
crackLargeScale | number | 2.45 | Grande échelle 0,3–8 pas 0,05 |
crackWarp | number | 0.22 | Déformation 0–1,5 pas 0,01 |
crackCoverage | number | 0.19 | Couverture 0–1 pas 0,01 |
crackRegionScale | number | 1.8 | Échelle de région 0,1–4 pas 0,05 |
crackRegionCoverage | number | 0.6 | Couverture de région 0–1 pas 0,01 |
veinScale | number | 8 | Échelle des veines 1–20 pas 0,25 |
veinContrast | number | 0.55 | Contraste des veines 0–1 pas 0,01 |
crackWidth | number | 0.0025 | Largeur 0,0005–0,02 pas 0,0005 |
crackBrightness | number | 0.65 | Luminosité 0–3 pas 0,01 |
crackDarkness | number | 0.69 | Obscurité 0–1 pas 0,01 |
crackRefraction | number | 0.076 | Réfraction 0–0,1 pas 0,001 |
crackSurfaceStrength | number | 0.16 | Force de surface 0–1 pas 0,01 |
fineScale | number | 18.4 | Échelle fine 2–20 pas 0,1 |
fineAmount | number | 0.52 | Quantité fine 0–1 pas 0,01 |
fineCoverage | number | 1 | Couverture fine 0–1 pas 0,01 |
materialScatter | boolean | true | Diffusion interne |
materialInclusionScale | number | 0.05 | Échelle d'inclusion 0,05–3 pas 0,01 |
materialInclusionAmount | number | 2 | Inclusions photographiques 0–2 pas 0,01 |
interiorScatter | number | 0.09 | Diffusion intérieure 0–1 pas 0,01 |
materialClearcoat | boolean | true | Vernis |
clearcoat | number | 0 | Vernis 0–1 pas 0,01 |
… [tronqué pour la traduction]