Titular de Fragmento de Vidrio
Paneles de vidrio cortados con Voronoi entran desde la profundidad, rotando, y aterrizan formando una silueta en mosaico del titular, luego salen volando más allá de la cámara. Cada fragmento es un clip Sutherland–Hodgman de una forma irregular contra su celda Voronoi, por lo que las piezas siempre cubren el tipo de letra. Las superficies de vidrio y matcap reciben niebla por fragmento; el vuelo en Z está desacoplado de la curva de easing para que los fragmentos lo recorran visiblemente. Un conteo de mosaicos de 1 da un solo panel.
Id de composición: glass-shard-title. Duración 12.16 s a 30 fps, 1920×1080.
Archivos
glass-shard-title.html(16 KB)assets/ferndale_studio_01_1k.hdr(1.6 MB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/cormorant-garamond.woff2(37 KB)assets/fonts/CormorantGaramond-OFL.txt(4 KB)assets/glass-main.js(549 KB)assets/Three-LICENSE.txt(1 KB)assets/matcap-1.png(obtenido desde el CDN en la instalación)
Instalación
Instalar con npx hyperframes add glass-shard-title; por defecto los archivos anteriores se colocan bajo compositions/glass-shard-title/. Luego montar el bloque desde el index.html anfitrión:
<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>
Renderizar con valores personalizados apuntando directamente al archivo de composición:
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
Variables
Se leen en tiempo de ejecución mediante window.__hyperframes.getVariables(); se declaran en la raíz de la composición como data-composition-variables (atributo entre comillas simples, JSON plano).
| id | tipo | defecto | etiqueta / rango |
|---|---|---|---|
headline | cadena | "Designed in glass" | Titular máximo 40 caracteres |
tileCount | número | 8 | Mosaicos 1–400 paso 1 |
roundness | número | 0.4 | Redondez (0-1) 0–1 paso 0.01 |
bevel | número | 0.35 | Bisel (0-1) 0–1 paso 0.01 |
meshSmooth | número | 0.6 | Suavizado de superficie (0-1) 0–1 paso 0.01 |
flyInTime | número | 2.3 | Tiempo de entrada (s) 0.2–6 paso 0.05 |
flyOutTime | número | 2.4 | Tiempo de salida (s) 0.2–6 paso 0.05 |
stagger | número | 0.27 | Escalonamiento (0-1) 0–1 paso 0.01 |
flyInRotation | número | 5 | Rotación de entrada (0-60) 0–60 paso 0.1 |
flyOutRotation | número | 6 | Rotación de salida (0-6) 0–6 paso 0.1 |
chaos | número | 0.25 | Caos del contorno (0-1) 0–1 paso 0.01 |
padding | número | 1 | Relleno de borde (0-1) 0–1 paso 0.01 |
sizeVariance | número | 0.35 | Variación de tamaño (0-1) 0–1 paso 0.01 |
gap | número | 0.03 | Espacio entre mosaicos 0–0.3 paso 0.002 |
easePow | número | 10 | Curva de easing de entrada (1-10) 1–10 paso 0.1 |
sideDist | número | 3 | Distancia lateral de vuelo 0–60 paso 0.5 |
zDist | número | -42 | Z de origen (negativo) -400–0 paso 2 |
zOut | número | 14 | Z de salida (+ = más allá de la cámara) -400–60 paso 2 |
fog | número | 36 | Distancia de niebla (0 = desactivado) 0–400 paso 2 |
Contrato de ejecución
- Una línea de tiempo GSAP pausada registrada como
window.__timelines["glass-shard-title"]. - Se resincroniza con el CustomEvent
hf-seek; cada fotograma es una función de forma cerrada del tiempo (solo PRNG con semilla, sin bucles rAF, sin Date.now). - Motor de renderizado: three.js 0.181.2 (empaquetado), GSAP 3.14.2, Canvas 2D, shaders GLSL, entorno HDR, Matcap, PRNG con semilla, d3-delaunay, mapas de sombra. Presupuesto aproximado de 350 MB por instancia activa; ejecutar una a la vez.
- Dependencias externas en tiempo de ejecución:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js. - Fuentes locales: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
- El código empaquetado está en línea dentro de la composición (assets/glass-main.js); reconstruir con esbuild y volver a incrustar después de editar el código fuente .mjs.
Reglas de edición (del proyecto fuente)
- Mantener
data-composition-variablescomo un atributo entre comillas simples con JSON plano". Nunca guardarlo a través del panel de Diseño de Studio. - No colocar
<canvas>en el marcado estático; crearlo en tiempo de ejecución. - Mantener cada estado visual como una función de t; la capacidad de búsqueda es lo que hace que el bloque sea renderizable.