Titre en éclats de verre
Des vitres découpées selon un diagramme de Voronoï volent depuis la profondeur, tournent sur elles-mêmes et atterrissent en formant une silhouette tuilée du titre, puis repartent au-delà de la caméra. Chaque éclat est le résultat d'une opération de découpage Sutherland–Hodgman entre un nuage de points bruités et sa cellule de Voronoï, garantissant que les pièces couvrent parfaitement le texte. Les surfaces de verre et de matcap bénéficient d'un brouillard par fragment ; le mouvement en profondeur est dissocié de l'easing, ce qui donne une animation visiblement tridimensionnelle. Un nombre de tuiles égal à 1 donne une seule vitre.
Identifiant de composition : glass-shard-title. Durée : 12,16 s à 30 i/s, 1920×1080.
Fichiers
glass-shard-title.html(16 Ko)assets/ferndale_studio_01_1k.hdr(1,6 Mo)assets/fonts/Geist-Bold.ttf(65 Ko)assets/fonts/Geist-Regular.ttf(65 Ko)assets/fonts/Geist-SemiBold.ttf(65 Ko)assets/fonts/Geist-OFL.txt(4 Ko)assets/fonts/cormorant-garamond.woff2(37 Ko)assets/fonts/CormorantGaramond-OFL.txt(4 Ko)assets/glass-main.js(549 Ko)assets/Three-LICENSE.txt(1 Ko)assets/matcap-1.png(récupéré depuis le CDN lors de l'installation)
Installation
Installez avec npx hyperframes add glass-shard-title ; par défaut, les fichiers ci-dessus atterrissent dans compositions/glass-shard-title/. Montez ensuite le bloc depuis le index.html hôte :
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Rendez la composition avec des valeurs personnalisées en ciblant le fichier de composition directement :
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Conçu en verre","tileCount":8}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition sous forme d'attribut data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | défaut | libellé / plage |
|---|---|---|---|
headline | chaîne | "Conçu en verre" | Titre, max 40 caractères |
tileCount | nombre | 8 | Tuiles 1–400 pas 1 |
roundness | nombre | 0.4 | Arrondi (0-1) 0–1 pas 0.01 |
bevel | nombre | 0.35 | Biseau (0-1) 0–1 pas 0.01 |
meshSmooth | nombre | 0.6 | Lissage de surface (0-1) 0–1 pas 0.01 |
flyInTime | nombre | 2.3 | Temps d'entrée (s) 0.2–6 pas 0.05 |
flyOutTime | nombre | 2.4 | Temps de sortie (s) 0.2–6 pas 0.05 |
stagger | nombre | 0.27 | Décalage (0-1) 0–1 pas 0.01 |
flyInRotation | nombre | 5 | Rotation d'entrée (0-60) 0–60 pas 0.1 |
flyOutRotation | nombre | 6 | Rotation de sortie (0-6) 0–6 pas 0.1 |
chaos | nombre | 0.25 | Chaos du contour (0-1) 0–1 pas 0.01 |
padding | nombre | 1 | Marge extérieure (0-1) 0–1 pas 0.01 |
sizeVariance | nombre | 0.35 | Variance de taille (0-1) 0–1 pas 0.01 |
gap | nombre | 0.03 | Écart entre tuiles 0–0.3 pas 0.002 |
easePow | nombre | 10 | Easing d'entrée (1-10) 1–10 pas 0.1 |
sideDist | nombre | 3 | Distance de vol latéral 0–60 pas 0.5 |
zDist | nombre | -42 | Distance Z d'origine (négative) -400–0 pas 2 |
zOut | nombre | 14 | Distance Z de sortie (+ = au-delà de la caméra) -400–60 pas 2 |
fog | nombre | 36 | Distance de brouillard (0 = désactivé) 0–400 pas 2 |
Contrat d'exécution
- Une timeline GSAP en pause enregistrée comme
window.__timelines["glass-shard-title"]. - Re-synchrone sur l'événement personnalisé
hf-seek; chaque image est une fonction de forme fermée du temps (seulement PRNG ensemencé, pas de boucles rAF, pas de Date.now). - Moteur de rendu : three.js 0.181.2 (intégré), GSAP 3.14.2, Canvas 2D, shaders GLSL, environnement HDR, Matcap, PRNG ensemencé, d3-delaunay, ombres projetées. Budget mémoire environ 350 Mo par instance active ; exécutez une seule composition à 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]/dist/d3-delaunay.min.js. - Polices locales : assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
- Le code intégré est inline dans la composition (assets/glass-main.js) ; reconstruisez avec esbuild et réintégrez après avoir modifié le source .mjs.
Règles d'édition (issues du projet source)
- Conservez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON entre guillemets droits". Ne l'enregistrez jamais via le panneau Design de Studio. - Ne placez pas de
<canvas>dans le balisage statique ; créez-le à l'exécution. - Assurez-vous que chaque état visuel est une fonction de t ; la capacité de recherche temporelle est ce qui rend le bloc renderisable.