Titre sous la canopée
Un dense feuillage texturé balaie l'écran avec une faible profondeur de champ, puis s'écarte pour révéler le premier titre ; un deuxième lot de feuilles, avec une profondeur augmentée, transporte le second titre devant la caméra. Quelques feuilles restent sur le texte et entretiennent 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 atterrissent sous compositions/canopy-part-title/. Montez ensuite le bloc à partir du 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-bois","headline2":"Avancez lentement"}'
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 | défaut | libellé / plage |
|---|---|---|---|
headline1 | string | "Sous-bois" | Titre 1 |
headline2 | string | "Avancez lentement" | Titre 2 |
font | string | "Helvetica" | Police des titres |
fontWeight | number | 900 | Poids de police 100–900 par pas de 100 |
fontSize | number | 1 | Taille de police (1 = ajustement automatique) 0.3–2 par pas de 0.01 |
letterSpacing | number | 0.01 | Espacement des lettres (em) -0.2–1 par pas de 0.01 |
background | color | "#020805" | Arrière-plan |
leafCount | number | 170 | Feuilles par balayage 40–320 par pas de 1 |
stayCount | number | 5 | Feuilles laissées derrière 0–20 par pas de 1 |
sweepSpeed | number | 1 | Vitesse de balayage 0.3–3 par pas de 0.05 |
retainedBreeze | number | 1 | Brise des feuilles retenues 0–2 par 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 ensemencé uniquement, pas de boucles rAF, pas de Date.now). - Moteur de rendu : three.js 0.170.0, GSAP 3.14.2, Canvas 2D, post-traitement, PRNG ensemencé, cartes d'ombre. Budget environ 350 Mo par instance active ; exécutez une à 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 de Google Fonts : Gelasio.
Règles d'édition (du projet source)
- Conservez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON"simple. Ne l'enregistrez jamais via le panneau de conception de Studio. - Ne mettez pas
<canvas>dans le balisage statique ; créez-le à l'exécution. - Faites en sorte que chaque état visuel soit une fonction de t ; la sécurité de recherche temporelle est ce qui rend le bloc rendable.