Título da Copa
Uma densa copa de folhas texturizadas percorre a tela com profundidade de campo rasa, depois se abre para revelar a primeira manchete; um segundo lote, elevado em profundidade, carrega a segunda manchete além da câmera. Um punhado de folhas permanece sobre o texto e mantém uma leve brisa. Fonte, peso, tamanho, espaçamento entre letras, contagem de folhas, velocidade da varredura e a brisa das folhas retidas são variáveis.
Id da composição: canopy-part-title. Duração 12 s a 30 fps, 1920×1080.
Arquivos
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
Instalação
Instale com npx hyperframes add canopy-part-title; por padrão, os arquivos acima serão colocados em compositions/canopy-part-title/. Em seguida, monte o bloco a partir do index.html hospedeiro:
<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>
Renderize com valores personalizados apontando diretamente para o arquivo de composição:
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Sub-bosque","headline2":"Mova-se devagar"}'
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 simples).
| id | tipo | padrão | rótulo / faixa |
|---|---|---|---|
headline1 | string | "Sub-bosque" | Manchete 1 |
headline2 | string | "Mova-se devagar" | Manchete 2 |
font | string | "Helvetica" | Fonte da manchete |
fontWeight | number | 900 | Peso da fonte 100–900 passo 100 |
fontSize | number | 1 | Tamanho da fonte (1 = ajuste automático) 0.3–2 passo 0.01 |
letterSpacing | number | 0.01 | Espaçamento entre letras (em) -0.2–1 passo 0.01 |
background | color | "#020805" | Fundo |
leafCount | number | 170 | Folhas por varredura 40–320 passo 1 |
stayCount | number | 5 | Folhas deixadas para trás 0–20 passo 1 |
sweepSpeed | number | 1 | Velocidade da varredura 0.3–3 passo 0.05 |
retainedBreeze | number | 1 | Brisa das folhas retidas 0–2 passo 0.05 |
Contrato de tempo de execução
- Uma timeline GSAP pausada registrada como
window.__timelines["canopy-part-title"]. - Ressincroniza no evento personalizado
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.170.0, GSAP 3.14.2, Canvas 2D, Pós-processamento, PRNG com semente, Mapas de sombra. Orçamento aproximado de 350 MB por instância ativa; execute uma de cada vez.
- Dependências de tempo de execução externas:
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. - Fontes da web do Google Fonts: Gelasio.
Regras de edição (do projeto de origem)
- Mantenha
data-composition-variablescomo um atributo entre aspas simples com JSON " simples. Nunca o salve através do painel Design do Studio. - Não coloque
<canvas>na marcação estática; crie-o em tempo de execução. - Mantenha todo estado visual como uma função de t; segurança de busca é o que torna o bloco renderizável.