# Ladrilho Uma grade de logos inclinada em 3D em que o logo sob o mouse salta para a frente e brilha em verde. > Ladrilho é um componente do THM Componentes que monta um mural de logos em quatro colunas, inclinado em perspectiva 3D como uma parede vista de lado. Ao passar o mouse, o logo em foco salta para a frente com um brilho que pulsa e os vizinhos sobem um pouco. Funciona bem para clientes, parceiros e integrações. - Categoria: Comércio e conversão - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/ladrilho/ ## 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 ```text 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. ## Componentes relacionados - [Freguesia](https://vibecode.thmtecnologia.com/componentes/freguesia/): Uma faixa com os logos dos seus clientes passando devagar, numa cor só, abaixo de um título curto. - [Virada](https://vibecode.thmtecnologia.com/componentes/virada/): Um cartão que troca de logo a cada poucos segundos, dobrando ao meio como um painel de aeroporto antigo. - [Escaninho](https://vibecode.thmtecnologia.com/componentes/escaninho/): Seção dividida em blocos de tamanhos diferentes, como uma marmita japonesa, para apresentar recursos ou serviços. - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. - [Amarelinha](https://vibecode.thmtecnologia.com/componentes/amarelinha/): Grade de linhas finas em que cada quadrado acende quando o mouse passa e se apaga devagar, deixando um rastro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.