Titre en éclats de verre
Des panneaux de verre découpés selon Voronoi volent depuis la profondeur, tourbillonnent, et atterrissent pour former la silhouette tuilée du titre, puis repartent au-delà de la caméra. Chaque éclat est un clip Sutherland–Hodgman d'un blob irrégulier contre sa cellule de Voronoi, garantissant que les pièces couvrent toujours le texte. Les surfaces en verre et matcap reçoivent un brouillard par fragment ; le vol en Z est dissocié de l'ease, permettant aux éclats de le traverser visiblement. Un nombre de tuiles de 1 donne un seul panneau.
Identifiant de composition : glass-shard-title. Durée 12,16 s à 30 ips, 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 à l'installation)
Installation
Installer avec npx hyperframes add glass-shard-title ; par défaut, les fichiers ci-dessus se placent sous compositions/glass-shard-title/. Monter ensuite le bloc dans 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>
Rendre avec des valeurs personnalisées en ciblant directement le fichier de composition :
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 comme attribut data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | default | label / plage |
|---|---|---|---|
headline | string | "Conçu en verre" | Titre max 40 caractères |
tileCount | number | 8 | Tuiles 1–400 pas 1 |
roundness | number | 0.4 | Rondité (0-1) 0–1 pas 0.01 |
bevel | number | 0.35 | Biseau (0-1) 0–1 pas 0.01 |
meshSmooth | number | 0.6 | Lissage de surface (0-1) 0–1 pas 0.01 |
flyInTime | number | 2.3 | Temps d'entrée (s) 0.2–6 pas 0.05 |
flyOutTime | number | 2.4 | Temps de sortie (s) 0.2–6 pas 0.05 |
stagger | number | 0.27 | Décalage (0-1) 0–1 pas 0.01 |
flyInRotation | number | 5 | Rotation d'entrée (0-60) 0–60 pas 0.1 |
flyOutRotation | number | 6 | Rotation de sortie (0-6) 0–6 pas 0.1 |
chaos | number | 0.25 | Chaos du contour (0-1) 0–1 pas 0.01 |
padding | number | 1 | Marge de bord (0-1) 0–1 pas 0.01 |
sizeVariance | number | 0.35 | Variance de taille (0-1) 0–1 pas 0.01 |
gap | number | 0.03 | Écart entre tuiles 0–0.3 pas 0.002 |
easePow | number | 10 | Ease position entrée (1-10) 1–10 pas 0.1 |
sideDist | number | 3 | Distance latérale 0–60 pas 0.5 |
zDist | number | -42 | Z de provenance (négatif) -400–0 pas 2 |
zOut | number | 14 | Z de sortie vers (+ = caméra) -400–60 pas 2 |
fog | number | 36 | Distance du brouillard (0 = désactivé) 0–400 pas 2 |
Contrat d'exécution
- Une timeline GSAP en pause enregistrée sous
window.__timelines["glass-shard-title"]. - Se resynchronise sur l'événement CustomEvent
hf-seek; chaque image est une fonction à temps fermé (PRNG ensemencé uniquement, pas de boucles rAF, pas de Date.now). - Rendu : three.js 0.181.2 (intégré), GSAP 3.14.2, Canvas 2D, shaders GLSL, environnement HDR, Matcap, PRNG ensemencé, d3-delaunay, cartes d'ombres. Budget environ 350 Mo par instance active ; exécuter 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]/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 inclus en ligne dans la composition (assets/glass-main.js) ; reconstruire avec esbuild et réintégrer après avoir modifié les sources .mjs.
Règles d'édition (issues du projet source)
- Garder
data-composition-variablescomme attribut entre guillemets simples avec du JSON". Ne jamais l'enregistrer via le panneau Design de Studio. - Ne pas placer
<canvas>dans le balisage statique ; le créer à l'exécution. - Garder chaque état visuel comme une fonction de t ; la sécurité de recherche temporelle est ce qui rend le bloc rendable.