Herói de Fatia de Código
Uma superfície completa de ladrilhos quadrados carrega uma manchete contínua. Um cursor imaginário cruza a superfície; os ladrilhos próximos respondem ao seu campo de profundidade Gaussiano com elevação e inclinação, e apenas as células que interseccionam qualquer silhueta de manchete viram para revelar a manchete traseira. Toda a grade é um único desenho instanciado em WebGL 2 com um par de texturas frontal/traseira compartilhadas, além de uma passagem de sombra projetada em lote. Cópia, tamanho do texto e tamanho da célula quadrada são independentes, para que os ladrilhos nunca estiquem. Direção da varredura, intensidade da atenuação, raio do cursor, queda, profundidade, balanço e sombra são todas variáveis.
ID da composição: code-slice-hero. Duração de 8 s a 30 fps, 1920×1080.
Arquivos
code-slice-hero.html(24 KB)assets/Geist-Bold.ttf(65 KB)assets/Geist-OFL.txt(4 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)shadows.js(10 KB)surface.js(8 KB)
Instalação
Instale com npx hyperframes add code-slice-hero; por padrão, os arquivos acima são colocados em compositions/code-slice-hero/. Em seguida, monte o bloco a partir do index.html do host:
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Renderize com valores personalizados direcionando o arquivo de composição diretamente:
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"FAÇA ACONTECER","reverseHeadline":"IMPORTANTE."}'
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 | "FAÇA ACONTECER" | Cópia · Manchete frontal máx. 32 caracteres |
| reverseHeadline | string | "IMPORTANTE." | Cópia · Manchete traseira máx. 32 caracteres |
| direction | enum | "esquerda-para-direita" | Movimento · Direção da varredura (esquerda-para-direita | direita-para-esquerda) |
| sweepDuration | número | 4.2 | Movimento · Duração da varredura 2,6–4,5 passo 0,05 |
| sweepEaseStrength | número | 3 | Movimento · Intensidade da atenuação da varredura 0–3 passo 0,05 |
| flipDuration | número | 0.75 | Movimento · Virada de cada ladrilho 0,65–1,65 passo 0,05 |
| cursorRadius | número | 210 | Cursor · Raio de influência 160–480 passo 10 |
| cursorFalloff | número | 1.4 | Cursor · Queda da influência 0,4–3,5 passo 0,05 |
| cursorDepth | número | 80 | Cursor · Profundidade (+ em direção à câmera) -320–320 passo 10 |
| tiltStrength | número | 55 | Cursor · Força de puxar/inclinar 0–55 passo 1 |
| noiseStrength | número | 2 | Movimento · Variação orgânica 0–2 passo 0,05 |
| flipBounce | número | 0.15 | Movimento · Balanço elástico da virada 0–0,8 passo 0,05 |
| cellSize | número | 112 | Fatias · Tamanho da célula quadrada 24–120 passo 4 |
| formationScale | número | 1 | Fatias · Escala da formação local 0,94–1 passo 0,001 |
| fontSize | número | 310 | Tipo · Tamanho máximo 160–480 passo 5 |
| behindColor | cor | "#212121" | Superfície · Fundo atrás do ladrilho |
| shadowStrength | número | 0.19 | Superfície · Força da sombra projetada 0–0,65 passo 0,01 |
| shadowSoftness | número | 4 | Superfície · Suavidade da sombra projetada 0,5–4 passo 0,1 |
Contrato de tempo de execução
- Uma linha do tempo GSAP pausada registrada como
window.__timelines["code-slice-hero"]. - 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: GSAP, Canvas 2D, PRNG com semente.
- Dependências de tempo de execução externas: nenhuma (servido localmente).
- Fontes locais: assets/Geist-Bold.ttf.
Regras de edição (do projeto de origem)
- Mantenha
data-composition-variablescomo um atributo entre aspas simples com JSON puro". Nunca 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; a segurança de busca é o que torna o bloco renderizável.