Título de Dos Capas de Hojas
Una densa capa de hojas texturizadas barre el fotograma con poca profundidad de campo, luego se aparta para descubrir el primer titular; un segundo lote de hojas, desplazadas en profundidad, lleva el segundo titular más allá de la cámara. Un puñado de hojas se queda sobre el tipo y mantiene una brisa ligera. La fuente, el peso, el tamaño, el espaciado entre letras, la cantidad de hojas, la velocidad de barrido y la brisa retenida son variables.
Id de composición: canopy-part-title. Duración 12 s a 30 fps, 1920×1080.
Archivos
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
Instalación
Instala con npx hyperframes add canopy-part-title; por defecto los archivos anteriores se colocan bajo compositions/canopy-part-title/. Luego monta el bloque desde el index.html anfitrión:
<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>
Renderiza con valores personalizados apuntando directamente al archivo de composición:
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Sotobosque","headline2":"Muévete lentamente"}'
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 con comillas simples, JSON simple).
| id | tipo | defecto | etiqueta / rango |
|---|---|---|---|
headline1 | string | "Sotobosque" | Titular 1 |
headline2 | string | "Muévete lentamente" | Titular 2 |
font | string | "Helvetica" | Fuente del titular |
fontWeight | número | 900 | Peso de fuente 100–900 paso 100 |
fontSize | número | 1 | Tamaño de fuente (1 = ajuste automático) 0.3–2 paso 0.01 |
letterSpacing | número | 0.01 | Espaciado entre letras (em) -0.2–1 paso 0.01 |
background | color | "#020805" | Fondo |
leafCount | número | 170 | Hojas por barrido 40–320 paso 1 |
stayCount | número | 5 | Hojas que se quedan 0–20 paso 1 |
sweepSpeed | número | 1 | Velocidad de barrido 0.3–3 paso 0.05 |
retainedBreeze | número | 1 | Brisa de hojas retenidas 0–2 paso 0.05 |
Contrato de tiempo de ejecución
- Una línea de tiempo de GSAP pausada registrada como
window.__timelines["canopy-part-title"]. - Se resincroniza con el evento personalizado
hf-seek; cada fotograma es una función de forma cerrada del tiempo (solo PRNG con semilla, sin bucles rAF, sin Date.now). - Renderizador: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, posprocesamiento, PRNG con semilla, mapas de sombra. Presupuesto aproximado de 350 MB por instancia activa; ejecutar una a la vez.
- Dependencias externas de tiempo de ejecución:
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. - Fuentes web de Google Fonts: Gelasio.
Reglas de edición (del proyecto fuente)
- Mantener
data-composition-variablescomo un atributo con comillas simples con JSON plano entre comillas". 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 se pueda renderizar.