Portal Título Wireframe
Letras extruidas en wireframe se construyen a partir de la fuente Geist incluida, utilizando un cargador TTF y offset de polígonos, y luego se revelan a través de una explosión de portal cuyo caos es variable. Un segundo pulso intercambia las letras por una frase de reemplazo con ajuste de palabra completa y tamaño de tipo automático, escalonado con una curva de easing ajustable y un glitch de asentamiento, con niebla de profundidad opcional.
Id de composición: wireframe-portal-title. Duración 8 s a 30 fps, 1920×1080.
Archivos
wireframe-portal-title.html(63 KB)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)
Instalación
Instala con npx hyperframes add wireframe-portal-title; por defecto los archivos anteriores se colocan en compositions/wireframe-portal-title/. Luego monta el bloque desde el index.html anfitrión:
<div
data-composition-id="wireframe-portal-title"
data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.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/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"AVANCE","replacementPhrase":"¡Hagámoslo señor!"}'
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 | default | etiqueta / rango |
|---|---|---|---|
title | string | "BREAKTHROUGH" | Título máx. 18 caracteres |
replacementPhrase | string | "Lets do this sir!" | Frase de reemplazo 3D (diseño automático) |
phraseDuration | number | 1.85 | Duración transición frase (s) 0.65–2.9 paso 0.05 |
phraseEasing | number | 8 | Easing de transición (1 suave – 8 brusco) 1–8 paso 0.25 |
settleGlitch | number | 0.2 | Fuerza glitch de asentamiento 0–4 paso 0.05 |
depthFog | boolean | true | Niebla de profundidad (desvanecimiento temprano siempre activo) |
subtitle | string | "HYPERFRAMES PORTAL TITLE" | Subtítulo máx. 48 caracteres |
accent | color | "#F5C518" | Acento |
burstChaos | number | 1 | Caos de explosión (0-2) 0–2 paso 0.01 |
Contrato de ejecución
- Una línea de tiempo GSAP en pausa registrada como
window.__timelines["wireframe-portal-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). - Renderizador: three.js 0.181.2, GSAP 3.14.2, Canvas 2D, shaders GLSL, post-procesamiento, PRNG con semilla, Clipper. Presupuesto aproximado de 350 MB por instancia activa; ejecutar una a la vez.
- Dependencias externas de ejecución:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/clipper.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/. - Fuentes locales: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
Reglas de edición (del proyecto fuente)
- Mantén
data-composition-variablescomo un atributo entre comillas simples con JSON plano". Nunca lo guardes a través del panel de Diseño de Studio. - No pongas
<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.