Título de Estilhaços de Vidro
Painéis de vidro cortados em Voronoi voam do fundo, girando, e pousam como uma silhueta mosaicada do título e, em seguida, voam para além da câmera. Cada estilhaço é um recorte de Sutherland–Hodgman de uma forma irregular dentro de sua célula Voronoi, garantindo que as peças sempre cubram o texto. Superfícies de vidro e matcap recebem névoa por fragmento; o voo em Z é desacoplado da suavidade, de modo que os estilhaços o percorrem visivelmente. A contagem de peças igual a 1 produz um único painel.
Id de 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(baixado do CDN na instalação)
Instalação
Instale com npx hyperframes add glass-shard-title; por padrão, os arquivos acima serã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 com aspas simples, JSON simples).
| id | tipo | padrão | rótulo / intervalo |
|---|---|---|---|
headline | string | "Designed in glass" | Título, máx. 40 caracteres |
tileCount | number | 8 | Peças 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 | Intervalo (0-1), 0–1, passo 0,01 |
flyInRotation | number | 5 | Rotação na entrada (0-60), 0–60, passo 0,1 |
flyOutRotation | number | 6 | Rotação na 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çamento entre peças, 0–0,3, passo 0,002 |
easePow | number | 10 | Suavidade da posição de entrada (1-10), 1–10, passo 0,1 |
sideDist | number | 3 | Distância lateral de voo, 0–60, passo 0,5 |
zDist | number | -42 | Distância Z de origem (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 névoa (0 = desligada), 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 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 de runtime externas:
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 é incorporado à composição (assets/glass-main.js); reconstrua com esbuild e reincorpore após editar o código-fonte .mjs.
Regras de edição (do projeto de origem)
- Mantenha
data-composition-variablescomo um atributo com aspas simples e JSON com aspas duplas". 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.