Canopy Part Title
Uma densa copa de folhas texturizadas varre o quadro com profundidade de campo rasa e, em seguida, se abre para revelar o primeiro título; um segundo lote, elevado pela profundidade, carrega o segundo título passando pela câmera. Algumas folhas permanecem no tipo e mantêm uma brisa suave. 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 são colocados em compositions/canopy-part-title/. Em seguida, monte o bloco a partir do index.html do host:
<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":"Understory","headline2":"Move slowly"}'
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 | "Understory" | Título 1 |
headline2 | string | "Move slowly" | Título 2 |
font | string | "Helvetica" | Fonte do título |
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 em tempo de execução
- Uma timeline GSAP pausada registrada como
window.__timelines["canopy-part-title"]. - Ressincroniza no CustomEvent
hf-seek; cada quadro é uma função de forma fechada do tempo (apenas PRNG semeado, sem loops rAF, sem Date.now). - Renderizador: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Pós-processamento, PRNG semeado, 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]/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 fonte)
- Mantenha
data-composition-variablescomo um atributo entre aspas simples com JSON simples". 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.