# Interactive Grid Pattern Grade de linhas finas em que cada quadrado acende quando o mouse passa e se apaga devagar, deixando um rastro. > O Interactive Grid Pattern é um fundo do THM Componentes feito em SVG: uma grade de linhas finas em que o quadrado sob o cursor acende na hora e se apaga em um segundo, formando um rastro por onde o mouse passa. Leve e sem canvas, combina com seções de funcionalidades, páginas de produto para desenvolvedores e heros técnicos. - Categoria: Fundos e atmosferas - 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 - URL: https://vibecode.thmtecnologia.com/componentes/interactive-grid-pattern/ ## Como ele é Lembra papel quadriculado em que cada casa se ilumina quando o mouse passa por cima. As linhas são cinza, finas e semitransparentes, então funcionam no claro e no escuro. Ao passar o cursor, o quadrado de baixo ganha um preenchimento cinza-claro na hora e, quando o cursor sai, desbota em um segundo, deixando um rastro curto que segue o caminho do mouse. Por padrão são 24 por 24 quadrados de 40 pixels. Na demo, a grade aparece inclinada, com uma máscara circular que apaga as bordas e um título por cima; outra versão acende os quadrados em azul. ## Você pode estar procurando isto se pediu algo assim - “fundo quadriculado que acende onde passo o mouse” - “aquela grade de quadradinhos que deixa um rastro de luz com o cursor” - “fundo técnico com grid para a seção de funcionalidades do SaaS” - “grade sutil atrás do título que reage ao mouse sem pesar” - “efeito de papel milimetrado interativo para site de desenvolvedor” - “fundo de grid que funcione no modo claro e no escuro” ## Também chamado de grid pattern, fundo quadriculado, interactive grid, hover grid, grade interativa, grid background, SVG grid pattern ## Quando usar - Seção de funcionalidades ou de integrações de um SaaS - Página de produto para desenvolvedores, API ou documentação - Hero técnico com título curto no centro - Fundo de área com cards que pede uma textura discreta ## Quando evitar - Sites acessados quase só pelo celular, porque o efeito depende do cursor - Grades muito densas em telas grandes, porque cada quadrado é um elemento SVG na página ## Como pedir para a sua IA ```text Crie um fundo de grade em SVG na seção de funcionalidades em que o quadrado sob o cursor acende e se apaga devagar, deixando rastro: linhas finas nas cores do meu tema, máscara radial nas bordas, bom contraste no claro e no escuro e versão estática para movimento reduzido. ``` 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 Interactive Grid Pattern ### O Interactive Grid Pattern funciona no celular? A grade aparece normalmente, mas o efeito de acender depende do cursor: o Interactive Grid Pattern reage à entrada e à saída do mouse em cada quadrado, sem tratamento específico de toque. No celular, ele funciona como uma textura quadriculada quase parada, o que costuma bastar como fundo. ### Como faço o Interactive Grid Pattern cobrir uma seção larga? A grade tem um número fixo de quadrados: por padrão, 24 por 24 de 40 pixels, o que cobre 960 pixels em cada direção. No Interactive Grid Pattern, aumente a prop squares, ou ajuste width e height para quadrados maiores, até preencher a seção. Grades muito densas criam muitos elementos SVG. ### Dá para mudar a cor dos quadrados do Interactive Grid Pattern? Sim. O Interactive Grid Pattern aceita classes extras: squaresClassName vale para cada quadrado, e a demo colorida usa um preenchimento azul no hover; className vale para a grade inteira, como máscara ou inclinação. O prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto. ## Componentes relacionados - [Flickering Grid](https://vibecode.thmtecnologia.com/componentes/flickering-grid/): Grade de quadradinhos que acendem e apagam ao acaso, em ritmo lento, como um painel de LED em repouso. - [Pattern Background](https://vibecode.thmtecnologia.com/componentes/pattern-background/): Fundo de grade fina ou de pontos que some nas bordas e pode deslizar devagar numa direção. - [Infinite Grid](https://vibecode.thmtecnologia.com/componentes/infinite-grid/): Uma parede de cartões com imagem que você arrasta para qualquer lado, sem nunca chegar ao fim. - [Tetris](https://vibecode.thmtecnologia.com/componentes/tetris/): Quadrados que caem devagar numa grade e se empilham no fundo, como no Tetris, e somem quando você clica. - [Animate Grid](https://vibecode.thmtecnologia.com/componentes/animate-grid/): Uma grade de logos inclinada em 3D em que o logo sob o mouse salta para a frente e brilha em verde. --- 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.