Titre de la Canopée
Une canopée dense de feuilles texturées balaie l'écran avec une faible profondeur de champ, puis s'écarte pour révéler le premier titre ; un deuxième groupe de feuilles, relevé en profondeur, transporte le second titre au-delà de la caméra. Quelques feuilles restent sur le texte pour créer une légère brise. La police, le poids, la taille, l'espacement des lettres, le nombre de feuilles, la vitesse de balayage et la brise retenue sont des variables.
Identifiant de composition : canopy-part-title. Durée 12 s à 30 ips, 1920×1080.
Fichiers
canopy-part-title.html(57 Ko)assets/leaf-surface-color.webp(64 Ko)assets/leaf-surface-normal.webp(136 Ko)
Installation
Installez avec npx hyperframes add canopy-part-title ; par défaut, les fichiers ci-dessus sont déposés dans compositions/canopy-part-title/. Montez ensuite le bloc depuis le fichier index.html hôte :
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
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/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Sous-étage","headline2":"Avancez lentement"}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition en tant qu'attribut data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | défaut | étiquette / plage |
|---|---|---|---|
headline1 | chaîne | "Sous-étage" | Titre 1 |
headline2 | chaîne | "Avancez lentement" | Titre 2 |
font | chaîne | "Helvetica" | Police des titres |
fontWeight | nombre | 900 | Poids de la police 100–900 pas de 100 |
fontSize | nombre | 1 | Taille de police (1 = ajustement auto) 0.3–2 pas de 0.01 |
letterSpacing | nombre | 0.01 | Espacement des lettres (em) -0.2–1 pas de 0.01 |
background | couleur | "#020805" | Arrière-plan |
leafCount | nombre | 170 | Feuilles par balayage 40–320 pas de 1 |
stayCount | nombre | 5 | Feuilles laissées derrière 0–20 pas de 1 |
sweepSpeed | nombre | 1 | Vitesse de balayage 0.3–3 pas de 0.05 |
retainedBreeze | nombre | 1 | Brise des feuilles retenues 0–2 pas de 0.05 |
Contrat d'exécution
- Une timeline GSAP en pause enregistrée sous
window.__timelines["canopy-part-title"]. - Se resynchronise sur l'événement personnalisé
hf-seek; chaque image est une fonction fermée du temps (PRNG à graine uniquement, pas de boucle rAF, pas de Date.now). - Moteur de rendu : three.js 0.170.0, GSAP 3.14.2, Canvas 2D, post-traitement, PRNG à graine, cartes d'ombres. Budget d'environ 350 Mo par instance active ; exécutez une seule instance à la fois.
- Dépendances d'exécution externes :
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js. - Polices Web provenant de Google Fonts : Gelasio.
Règles d'édition (du projet source)
- Gardez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON en"simple. Ne l'enregistrez jamais via le panneau Design de Studio. - Ne placez pas
<canvas>dans le balisage statique ; créez-le à l'exécution. - Conservez chaque état visuel comme une fonction de t ; la sécurité de la recherche (seek) est ce qui rend le bloc rendable.