Carrossel de Cuboides
Cuboides arredondados e biselados, carregando conteúdo de cartões, voam da direita como um grupo rígido, cruzam com uma rotação escalonada por cuboide, desaceleram até uma parada heroica e saem pela esquerda. O espaçamento é derivado das dimensões dos cuboides e da maior meia-extensão X alcançável, garantindo que os cuboides nunca se sobreponham. Quarenta variáveis carregam o esquema DialKit original: geometria, materiais, luzes, sombras, plano de fundo, câmera e cada duração e easing de segmento. Os cartões vêm de uma lista interna ou de uma variável JSON.
ID da composição: cuboid-carousel. Duração 6.666666666666667 s a 30 fps, 1920×1080.
Arquivos
cuboid-carousel.html(38 KB)assets/Three-LICENSE.txt(1 KB)assets/addons/environments/RoomEnvironment.js(5 KB)assets/addons/utils/BufferGeometryUtils.js(36 KB)assets/cuboid-motion.js(593 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
Instalação
Instale com npx hyperframes add cuboid-carousel; por padrão os arquivos acima são colocados em compositions/cuboid-carousel/. Em seguida, monte o bloco a partir do index.html do host:
<div
data-composition-id="cuboid-carousel"
data-composition-src="compositions/cuboid-carousel/cuboid-carousel.html"
data-start="0"
data-duration="6.666666666666667"
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/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
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 |
|---|---|---|---|
cardsJson | texto | "" | Conteúdo · JSON dos cartões (opcional, veja CARDS no código) |
heroCard | número | 4 | Conteúdo · Cartão heroico (baseado em 1) 1–12 passo 1 |
count | número | 8 | Conteúdo · Contagem de cartões repetidos 1–12 passo 1 |
gap | número | 0.01 | Layout · Espaçamento extra entre cuboides 0–1.5 passo 0.005 |
cuboidWidth | número | 1.7 | Cuboide · Largura 0.3–5 passo 0.01 |
cuboidHeight | número | 2.4 | Cuboide · Altura 0.3–6 passo 0.01 |
cuboidDepth | número | 0.14 | Cuboide · Espessura (profundidade) 0.02–2 passo 0.01 |
cornerRadius | número | 0.105 | Cuboide · Raio do canto 0–0.6 passo 0.005 |
bevelSize | número | 0.03 | Cuboide · Tamanho do bisel (chanfro da borda) 0–0.3 passo 0.001 |
bevelThickness | número | 0.04 | Cuboide · Espessura do bisel 0–0.3 passo 0.001 |
smoothness | número | 32 | Cuboide · Suavidade (segmentos) 1–32 passo 1 |
bodyColor | cor | "#242424" | Cuboide · Cor do corpo |
roughness | número | 0.6 | Cuboide · Rugosidade 0–1 passo 0.01 |
metalness | número | 0.4 | Cuboide · Metalicidade 0–1 passo 0.01 |
heroScale | número | 1 | Herói · Escala isolada 1–1.6 passo 0.01 |
heroFillIntensity | número | 0.55 | Herói · Intensidade da luz facial 0–2 passo 0.05 |
heroExitX | número | 288 | Herói · Graus de rotação X de saída -720–720 passo 1 |
heroExitY | número | -234 | Herói · Graus de rotação Y de saída -720–720 passo 1 |
heroExitZ | número | 198 | Herói · Graus de rotação Z de saída -720–720 passo 1 |
ambientIntensity | número | 0.35 | Luzes · Intensidade ambiente 0–4 passo 0.01 |
ambientColor | cor | "#ffffff" | Luzes · Cor ambiente |
topIntensity | número | 3.1 | Luzes · Intensidade do rig superior 0–12 passo 0.05 |
topColor | cor | "#ffffff" | Luzes · Cor do rig superior |
bottomIntensity | número | 2.15 | Luzes · Intensidade do rig inferior 0–12 passo 0.05 |
bottomColor | cor | "#ffcaad" | Luzes · Cor do rig inferior |
keyIntensity | número | 5 | Luzes · Intensidade do rig principal 0–12 passo 0.05 |
keyColor | cor | "#ffe9d6" | Luzes · Cor do rig principal |
shadowRadius | número | 44.5 | Sombras · Suavidade no tamanho do mapa 2048 0–50 passo 0.5 |
shadowMapSize | número | 2048 | Sombras · Tamanho do mapa 512–4096 passo 256 |
backdrop | cor | "#0b0d13" | Fundo · Cor |
cameraFov | número | 11 | Câmera · Campo de visão inicial 10–90 passo 0.5 |
cameraX | número | -1.65 | Câmera · X inicial -20–20 passo 0.05 |
cameraY | número | 8.5 | Câmera · Y inicial -20–20 passo 0.05 |
cameraZ | número | -8.508708 | Câmera · Z inicial (distância) -20–50 passo 0.1 |
cameraSettleFrame | número | 70 | Câmera · Quadro de estabilização (30 fps) 20–90 passo 1 |
handheldStrength | número | 1 | Câmera · Intensidade do movimento de mão 0–1 passo 0.05 |
cameraTargetFov | número | 34 | Alvo da câmera · Campo de visão 10–90 passo 0.5 |
cameraTargetX | número | -7.25 | Alvo da câmera · X -20–20 passo 0.05 |
cameraTargetY | número | 1.15 | Alvo da câmera · Y -20–20 passo 0.05 |
cameraTargetZ | número | 6.2 | Alvo da câmera · Z 2–50 passo 0.1 |
Contrato de tempo de execução
- Uma timeline GSAP pausada registrada como
window.__timelines["cuboid-carousel"]. - Re-sincroniza no CustomEvent
hf-seek; cada quadro é uma função fechada do tempo (apenas PRNG seedado, sem loops rAF, sem Date.now). - Renderizador: WebGL, GSAP, Canvas 2D, PMREM, Mapas de sombra. Orçamento aproximado de 350 MB por instância ativa; execute uma de cada vez.
- Dependências externas de tempo de execução:
./assets/three.module.min.js,./assets/addons/. - Fontes da Web do Google Fonts: Inter.
Regras de edição (do projeto fonte)
- Mantenha
data-composition-variablescomo um atributo com aspas simples contendo JSON com aspas duplas". Nunca salve através do painel Design do Studio. - Não coloque
<canvas>no markup estático; crie-o em tempo de execução. - Mantenha cada estado visual como uma função de t; a segurança de busca (seek-safety) é o que torna o bloco renderizável.