Como ele é
Imagine uma parede de azulejos vista de lado, com um logo em cada peça. A grade de quatro colunas fica girada em perspectiva, e cada célula tem uma sombra verde-menta bem suave. Quando o cursor passa por um logo, a peça cresce, avança na direção de quem olha e ganha fundo branco e borda verde, enquanto o logo pulsa com um brilho verde que acende e apaga devagar. As quatro peças ao redor sobem um pouco, com um brilho mais fraco. Ao sair, tudo volta ao lugar. No modo escuro, a peça em destaque fica azul-marinho e as sombras escurecem.
Você pode estar procurando isto se pediu algo assim
- mural com os logos dos clientes que reage quando passo o mouse
- grade de logos inclinada em 3D para a página inicial
- seção de parceiros com logos que saltam e brilham
- mostrar as integrações do produto num painel em perspectiva
- logos dos clientes com um efeito mais caprichado que uma fileira parada
- grade de ícones em que o item sob o cursor salta para a frente
Também chamado de
- grade animada
- vitrine de logos
- logo wall
- mural de logos
- grade em perspectiva
- skew grid
- 3D logo grid
Quando usar
- Seção de clientes ou parceiros em landing page de SaaS
- Mural de integrações ou de tecnologias que o produto suporta
- Página de agência mostrando as marcas atendidas
- Bloco de recursos com ícones no lugar dos logos
Quando evitar
- Mais de 16 logos ou grades fora de quatro colunas, porque o destaque dos vizinhos é calculado para essa grade
- Páginas pensadas para celular, já que o salto e o brilho dependem do mouse ou de um toque na peça
Como pedir para a sua IA
Crie um mural de logos de clientes numa grade inclinada em perspectiva 3D: ao passar o mouse, o logo salta para a frente com brilho pulsante e os vizinhos sobem um pouco, nas cores da minha marca, com modo escuro, versão estática para quem prefere menos movimento e boa leitura no celular.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Ladrilho
Dá para trocar a cor do brilho e a inclinação de Ladrilho?
Dá. Ladrilho recebe por props as duas cores do brilho, que por padrão é verde, a perspectiva e os ângulos de giro da grade. Cada logo entra por um slot, então você pode usar imagem ou SVG. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto no lugar das cores fixas do componente.
Ladrilho funciona no celular?
Funciona em parte. Em Ladrilho, o destaque acompanha a posição do ponteiro, e um toque numa peça também a faz saltar, mas ela fica em destaque até o próximo toque em outro lugar. Em telas estreitas, quatro colunas inclinadas podem ficar apertadas; o prompt do THM Componentes pede teste em mobile, comparando LCP e INP.
Ladrilho respeita quem prefere menos movimento?
O componente original anima sempre: o brilho pulsa enquanto o logo está em destaque. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de reduzir movimento, o que em Ladrilho é simples: manter o realce e a borda, sem o pulso do brilho e sem a transição do salto.
