szeproka/hyperframes-registry

Uma superfície de ladrilhos com manchete vira célula por célula sob um campo de profundidade varrido para revelar a manchete traseira. Bloco HyperFrames, 1920×1080, 8s, 18 variáveis.

O que é hyperframes-registry?

O Code Slice Hero é um bloco visual HyperFrames que cria uma animação de grade de ladrilhos onde uma manchete frontal é gradualmente substituída por uma manchete traseira, com cada ladrilho girando individualmente. Um cursor imaginário varre a superfície, e os ladrilhos próximos a ele respondem com elevação e inclinação baseadas em um campo de profundidade Gaussiano, enquanto apenas aqueles que intersectam o contorno de uma das manchetes giram para revelar a parte de trás. Toda a grade é renderizada com uma única chamada de desenho WebGL 2, usando um par de texturas compartilhadas (frente e trás) e uma passagem de sombra projetada em lote. A animação é totalmente determinística (sem loops de rAF ou Date.now), garantindo segurança em buscas e reprodução consistente. O bloco oferece 18 variáveis ajustáveis, que incluem as manchetes, direção da varredura, duração, raio do cursor, força de inclinação, tamanho da célula e intensidade da sombra. É compatível com o ecossistema HyperFrames e pode ser adicionado via CLI com `npx hyperframes add code-slice-hero`, renderizado com valores personalizados e incorporado em páginas HTML via atributos `data-composition-*`.

Funciona com~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/szeproka/hyperframes-registry/tree/HEAD/registry/blocks/code-slice-hero

Documentação

Code Slice Hero

Uma superfície completa de ladrilhos quadrados carrega uma manchete sem costura. 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 intersectam o contorno de uma das manchetes viram para revelar a manchete traseira. Toda a grade é um único desenho instanciado WebGL 2 com um par de texturas compartilhadas (frente/trás), mais uma passagem de sombra projetada em lote. O texto, o tamanho da fonte e o tamanho das células quadradas são independentes, para que os ladrilhos nunca estiquem. Direção da varredura, intensidade da suavização, raio do cursor, queda, profundidade, elasticidade e sombra são todas variáveis.

ID da composição: code-slice-hero. Duração 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 hospedeiro:

<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 apontando diretamente para o arquivo da composição:

npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'

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 puro).

id	tipo	padrão	rótulo / faixa
`headline`	string	`"MAKE IT"`	Texto · Manchete frontal máx. 32 caracteres
`reverseHeadline`	string	`"MATTER."`	Texto · Manchete traseira máx. 32 caracteres
`direction`	enum	`"left-to-right"`	Movimento · Direção da varredura (esquerda-direita, direita-esquerda)
`sweepDuration`	number	`4.2`	Movimento · Duração da varredura 2.6–4.5 passo 0.05
`sweepEaseStrength`	number	`3`	Movimento · Intensidade da suavização 0–3 passo 0.05
`flipDuration`	number	`0.75`	Movimento · Duração da virada de cada ladrilho 0.65–1.65 passo 0.05
`cursorRadius`	number	`210`	Cursor · Raio de influência 160–480 passo 10
`cursorFalloff`	number	`1.4`	Cursor · Queda da influência 0.4–3.5 passo 0.05
`cursorDepth`	number	`80`	Cursor · Profundidade (+ em direção à câmera) -320–320 passo 10
`tiltStrength`	number	`55`	Cursor · Força de inclinação/puxão 0–55 passo 1
`noiseStrength`	number	`2`	Movimento · Variação orgânica 0–2 passo 0.05
`flipBounce`	number	`0.15`	Movimento · Elasticidade da virada 0–0.8 passo 0.05
`cellSize`	number	`112`	Fatias · Tamanho do ladrilho quadrado 24–120 passo 4
`formationScale`	number	`1`	Fatias · Escala da formação local 0.94–1 passo 0.001
`fontSize`	number	`310`	Tipo · Tamanho máximo 160–480 passo 5
`behindColor`	cor	`"#212121"`	Superfície · Fundo atrás do ladrilho
`shadowStrength`	number	`0.19`	Superfície · Intensidade da sombra projetada 0–0.65 passo 0.01
`shadowSoftness`	number	`4`	Superfície · Suavidade da sombra projetada 0.5–4 passo 0.1

Contrato de execução

Uma timeline GSAP pausada registrada como window.__timelines["code-slice-hero"].
Re-sincroniza no evento 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 externas de execução: nenhuma (servidas localmente).
Fontes locais: assets/Geist-Bold.ttf.

Regras de edição (do projeto de origem)

Mantenha data-composition-variables como um atributo com aspas simples e JSON com aspas duplas. 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; a segurança em buscas é o que torna o bloco renderizável.