Code Slice Hero
Una superficie completa de mosaicos cuadrados lleva un titular continuo. Un cursor imaginario cruza la superficie; los mosaicos cercanos responden a su campo de profundidad gaussiano con elevación e inclinación, y solo las celdas que intersecan la silueta de cualquiera de los titulares se voltean para revelar el titular trasero. Toda la cuadrícula es un solo dibujo instanciado de WebGL 2 con un par de texturas frontal/trasera compartidas, más un pase de sombras proyectadas por lotes. El texto, el tamaño de la fuente y el tamaño de las celdas cuadradas son independientes, por lo que los mosaicos nunca se estiran. La dirección de barrido, la fuerza de ease, el radio del cursor, la caída, la profundidad, el rebote y la sombra son variables.
Id de composición: code-slice-hero. Duración 8 s a 30 fps, 1920×1080.
Archivos
code-slice-hero.html(24 KB)assets/Geist-Bold.ttf(65 KB)assets/Geist-OFL.txt(4 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)shadows.js(10 KB)surface.js(8 KB)
Instalación
Instala con npx hyperframes add code-slice-hero; por defecto los archivos anteriores se colocan en compositions/code-slice-hero/. Luego monta el bloque desde el index.html anfitrión:
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
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/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'
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 | default | etiqueta / rango |
| ------------------- | ------ | ----------------- | --------------------------------------------------- | -------------- |
| headline | string | "MAKE IT" | Texto · Titular frontal máx. 32 caracteres |
| reverseHeadline | string | "MATTER." | Texto · Titular trasero máx. 32 caracteres |
| direction | enum | "left-to-right" | Movimiento · Dirección de barrido (izquierda-a-derecha | derecha-a-izquierda) |
| sweepDuration | number | 4.2 | Movimiento · Duración del barrido 2.6–4.5 paso 0.05 |
| sweepEaseStrength | number | 3 | Movimiento · Fuerza de ease del barrido 0–3 paso 0.05 |
| flipDuration | number | 0.75 | Movimiento · Duración del volteo de cada mosaico 0.65–1.65 paso 0.05 |
| cursorRadius | number | 210 | Cursor · Radio de influencia 160–480 paso 10 |
| cursorFalloff | number | 1.4 | Cursor · Caída de influencia 0.4–3.5 paso 0.05 |
| cursorDepth | number | 80 | Cursor · Profundidad (+ hacia la cámara) -320–320 paso 10 |
| tiltStrength | number | 55 | Cursor · Fuerza de inclinación / elevación 0–55 paso 1 |
| noiseStrength | number | 2 | Movimiento · Variación orgánica 0–2 paso 0.05 |
| flipBounce | number | 0.15 | Movimiento · Rebote elástico al voltear 0–0.8 paso 0.05 |
| cellSize | number | 112 | Rebanadas · Tamaño de celda cuadrada 24–120 paso 4 |
| formationScale | number | 1 | Rebanadas · Escala de formación local 0.94–1 paso 0.001 |
| fontSize | number | 310 | Tipografía · Tamaño máximo 160–480 paso 5 |
| behindColor | color | "#212121" | Superficie · Color de fondo detrás del mosaico |
| shadowStrength | number | 0.19 | Superficie · Fuerza de la sombra proyectada 0–0.65 paso 0.01 |
| shadowSoftness | number | 4 | Superficie · Suavidad de la sombra proyectada 0.5–4 paso 0.1 |
Contrato de tiempo de ejecución
- Una línea de tiempo GSAP pausada registrada como
window.__timelines["code-slice-hero"]. - 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). - Renderizador: GSAP, Canvas 2D, PRNG con semilla.
- Dependencias externas en tiempo de ejecución: ninguna (servidas localmente).
- Fuentes locales: assets/Geist-Bold.ttf.
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 todo estado visual como una función de t; la seguridad de búsqueda es lo que hace que el bloque sea renderizable.