Título de parte de Dosel
Un denso dosel de hojas texturizadas barre el encuadre con poca profundidad de campo, luego se separa para descubrir el primer titular; un segundo grupo, con profundidad elevada, lleva el segundo titular más allá de la cámara. Un puñado de hojas permanece sobre el texto y mantiene una brisa ligera. La fuente, el peso, el tamaño, el espaciado entre letras, la cantidad de hojas, la velocidad del barrido y la brisa de las hojas retenidas 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
Leídas en tiempo de ejecución mediante window.__hyperframes.getVariables(); declaradas en la raíz de la composición como data-composition-variables (atributo entre comillas simples, JSON plano).
| id | tipo | predeterminado | etiqueta / rango |
|---|---|---|---|
headline1 | string | "Sotobosque" | Titular 1 |
headline2 | string | "Muévete lentamente" | Titular 2 |
font | string | "Helvetica" | Fuente del titular |
fontWeight | number | 900 | Peso de fuente 100–900 paso 100 |
fontSize | number | 1 | Tamaño de fuente (1 = ajuste automático) 0.3–2 paso 0.01 |
letterSpacing | number | 0.01 | Espaciado entre letras (em) -0.2–1 paso 0.01 |
background | color | "#020805" | Fondo |
leafCount | number | 170 | Hojas por barrido 40–320 paso 1 |
stayCount | number | 5 | Hojas dejadas atrás 0–20 paso 1 |
sweepSpeed | number | 1 | Velocidad de barrido 0.3–3 paso 0.05 |
retainedBreeze | number | 1 | Brisa de hoja retenida 0–2 paso 0.05 |
Contrato de ejecución
- Una línea de tiempo GSAP pausada registrada como
window.__timelines["canopy-part-title"]. - Se resincroniza con el CustomEvent
hf-seek; cada fotograma es una función cerrada del tiempo (solo PRNG con semilla, sin bucles rAF, sinDate.now). - Renderizador: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, posprocesado, PRNG con semilla, 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]/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)
- Mantén
data-composition-variablescomo un atributo entre comillas simples con JSON plano usando". Nunca lo guardes a través del panel de diseño de Studio. - No coloques
<canvas>en el marcado estático; créalo en tiempo de ejecución. - Mantén cada estado visual como una función de t; la seguridad de búsqueda es lo que hace que el bloque sea renderizable.