Título de Fragmento de Vidro
Painéis de vidro recortados por Voronoi voam de profundidade, rotacionam e pousam como uma silhueta fragmentada do título, depois voam para além da câmera. Cada fragmento é um recorte Sutherland–Hodgman de um 'blob' com tremor contra sua célula Voronoi, então as peças sempre cobrem o texto. Superfícies de vidro e matcap recebem neblina por fragmento; o voo em Z é desacoplado da suavidade para que os fragmentos o atravessem visivelmente. Contagem de ladrilhos 1 dá um único painel.
ID da composição: glass-shard-title. Duração 12,16 s a 30 fps, 1920×1080.
Arquivos
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(obtido do CDN na instalação)
Instalação
Instale com npx hyperframes add glass-shard-title; por padrão, os arquivos acima são colocados em compositions/glass-shard-title/. Em seguida, monte o bloco a partir do index.html do host:
<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>
Renderize com valores personalizados apontando diretamente para o arquivo de composição:
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
Variáveis
Lidas em tempo de execução via window.__hyperframes.getVariables(); declaradas na raiz da composição como data-composition-variables (atributo entre aspas simples, JSON puro).
| id | tipo | padrão | rótulo / faixa |
|---|---|---|---|
headline | string | "Designed in glass" | Título máximo 40 caracteres |
tileCount | number | 8 | Ladrilhos 1–400 passo 1 |
roundness | number | 0.4 | Arredondamento (0-1) 0–1 passo 0,01 |
bevel | number | 0.35 | Chanfro (0-1) 0–1 passo 0,01 |
meshSmooth | number | 0.6 | Suavidade da superfície (0-1) 0–1 passo 0,01 |
flyInTime | number | 2.3 | Tempo de entrada (s) 0,2–6 passo 0,05 |
flyOutTime | number | 2.4 | Tempo de saída (s) 0,2–6 passo 0,05 |
stagger | number | 0.27 | Espaçamento (0-1) 0–1 passo 0,01 |
flyInRotation | number | 5 | Rotação de entrada (0-60) 0–60 passo 0,1 |
flyOutRotation | number | 6 | Rotação de saída (0-6) 0–6 passo 0,1 |
chaos | number | 0.25 | Caos do contorno (0-1) 0–1 passo 0,01 |
padding | number | 1 | Preenchimento da borda (0-1) 0–1 passo 0,01 |
sizeVariance | number | 0.35 | Variação de tamanho (0-1) 0–1 passo 0,01 |
gap | number | 0.03 | Espaço entre ladrilhos 0–0,3 passo 0,002 |
easePow | number | 10 | Suavidade do movimento de entrada (1-10) 1–10 passo 0,1 |
sideDist | number | 3 | Distância lateral 0–60 passo 0,5 |
zDist | number | -42 | Distância Z de entrada (negativa) -400–0 passo 2 |
zOut | number | 14 | Distância Z de saída (+ = além da câmera) -400–60 passo 2 |
fog | number | 36 | Distância da neblina (0 = desligado) 0–400 passo 2 |
Contrato de tempo de execução
- Uma timeline GSAP pausada registrada como
window.__timelines["glass-shard-title"]. - Ressincroniza no CustomEvent
hf-seek; cada quadro é uma função de forma fechada do tempo (apenas PRNG com semente, sem loops rAF, sem Date.now). - Renderizador: three.js 0.181.2 (empacotado), GSAP 3.14.2, Canvas 2D, shaders GLSL, ambiente HDR, Matcap, PRNG com semente, d3-delaunay, mapas de sombra. Orçamento aproximado de 350 MB por instância ativa; execute uma de cada vez.
- Dependências externas em tempo de execução:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js. - Fontes locais: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
- O código empacotado está embutido na composição (assets/glass-main.js); reconstrua com esbuild e reinsira após editar o código-fonte .mjs.
Regras de edição (do projeto de origem)
- Mantenha
data-composition-variablescomo um atributo entre aspas simples com JSON"puro. Nunca o salve através do painel de Design do Studio. - Não coloque
<canvas>na marcação estática; crie-o em tempo de execução. - Mantenha cada estado visual como uma função de t; a segurança de busca é o que torna o bloco renderizável.