Grade de Cubos Ultra

Grade de cubos em arame: os cubos perto do cursor inclinam em cascata, e sem cursor o foco passeia sozinho.

Sobre este efeito

Grade de cubos em arame, em CSS 3D. Os cubos perto do cursor inclinam na diagonal, com a inclinação caindo com a distância até sumir, e o conjunto acompanha em cascata com uma suavização curta. Sem cursor, o foco passeia sozinho pela grade, devagar. Tamanho da grade, ângulo, raio, suavidade, cor das arestas e das faces, espessura e estilo da linha são configuráveis. Sem biblioteca, leve. Lado de hero, seção de produto técnico, fundo de bloco.

Ficha

Categoria: Interação
Onde combina: topo (hero), recursos, fundo
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso: 3,9 KB de código comprimido. Sem biblioteca externa.
No celular: Mais pesado: usa 51% do processador de um celular intermediário enquanto anima.
Na loja desde: 04/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-grade-de-cubos.

Assuntos

cubos
grade
3d
cursor
hover
arame
wireframe
css-puro