Titular de Fragmentos de Vidrio
Paneles de vidrio con corte Voronoi entran volando desde la profundidad, girando, y aterrizan formando una silueta del titular, luego vuelan más allá de la cámara. Cada fragmento es un recorte Sutherland–Hodgman de una burbuja con agitación contra su celda Voronoi, por lo que las piezas siempre cubren el texto. Las superficies de vidrio y matcap obtienen niebla por fragmento; el vuelo en Z está desacoplado del easing para que los fragmentos lo atraviesen 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(se obtiene del CDN al instalar)
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":"Diseñado en vidrio","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 simple).
| id | tipo | valor por defecto | etiqueta / rango |
|---|---|---|---|
headline | string | "Diseñado en vidrio" | Titular máximo 40 caracteres |
tileCount | number | 8 | Mosaicos 1–400 paso 1 |
roundness | number | 0.4 | Redondez (0-1) 0–1 paso 0.01 |
bevel | number | 0.35 | Bisel (0-1) 0–1 paso 0.01 |
meshSmooth | number | 0.6 | Suavizado de superficie (0-1) 0–1 paso 0.01 |
flyInTime | number | 2.3 | Tiempo de entrada (s) 0.2–6 paso 0.05 |
flyOutTime | number | 2.4 | Tiempo de salida (s) 0.2–6 paso 0.05 |
stagger | number | 0.27 | Escalonamiento (0-1) 0–1 paso 0.01 |
flyInRotation | number | 5 | Rotación de entrada (0-60) 0–60 paso 0.1 |
flyOutRotation | number | 6 | Rotación de salida (0-6) 0–6 paso 0.1 |
chaos | number | 0.25 | Caos del contorno (0-1) 0–1 paso 0.01 |
padding | number | 1 | Relleno de borde (0-1) 0–1 paso 0.01 |
sizeVariance | number | 0.35 | Variación de tamaño (0-1) 0–1 paso 0.01 |
gap | number | 0.03 | Espacio entre mosaicos 0–0.3 paso 0.002 |
easePow | number | 10 | Easing de posición de entrada (1-10) 1–10 paso 0.1 |
sideDist | number | 3 | Distancia de vuelo lateral 0–60 paso 0.5 |
zDist | number | -42 | Distancia Z de origen (negativa) -400–0 paso 2 |
zOut | number | 14 | Distancia Z de salida (+ = más allá de la cámara) -400–60 paso 2 |
fog | number | 36 | Distancia de niebla (0 = desactivada) 0–400 paso 2 |
Contrato de ejecución
- Una línea de tiempo GSAP en pausa registrada como
window.__timelines["glass-shard-title"]. - Se resincroniza con el evento personalizado
hf-seek; cada fotograma es una función 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 sombras. 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á integrado en la composición (assets/glass-main.js); reconstruir con esbuild y volver a integrar 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 poner
<canvas>en el marcado estático; crearlo en tiempo de ejecución. - Mantener cada estado visual como una función de t; la seguridad de búsqueda es lo que hace que el bloque sea renderizable.