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
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.
