Carrossel de Cuboides
Cuboides chanfrados e arredondados carregando conteúdo de cartão voam da direita como um grupo rígido, navegam com um escalonamento de rotação por cuboide, desaceleram até uma pausa de destaque e, em seguida, saem pela esquerda. O espaçamento é derivado das dimensões dos cuboides e do maior semi-eixo X alcançável, para que os cuboides nunca se sobreponham. Quarenta variáveis carregam o esquema original do DialKit: geometria, materiais, luzes, sombras, fundo, câmera e a duração e easing de cada segmento. Os cartões vêm de uma lista interna ou de uma variável JSON.
ID da composição: cuboid-carousel. Duração de 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 apontando diretamente para o arquivo de composição:
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 entre aspas simples, JSON puro).
| id | tipo | padrão | rótulo / faixa |
|---|---|---|---|
cardsJson | string | "" | Conteúdo · Cards JSON (opcional, veja CARDS no código) |
heroCard | número | 4 | Conteúdo · Cartão de destaque (base 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 chanfro (aresta) 0–0.3 passo 0.001 |
bevelThickness | número | 0.04 | Cuboide · Espessura do chanfro 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 | Destaque · Escala isolada 1–1.6 passo 0.01 |
heroFillIntensity | número | 0.55 | Destaque · Intensidade da luz frontal 0–2 passo 0.05 |
heroExitX | número | 288 | Destaque · Graus de rotação X de saída -720–720 passo 1 |
heroExitY | número | -234 | Destaque · Graus de rotação Y de saída -720–720 passo 1 |
heroExitZ | número | 198 | Destaque · 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 portátil 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 runtime
- Uma timeline GSAP pausada registrada como
window.__timelines["cuboid-carousel"]. - Ressincroniza no CustomEvent
hf-seek; cada quadro é uma função de forma 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 em runtime:
./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 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; segurança de busca é o que torna o bloco renderizável.