Como ele é
Lembra papel quadriculado ou a folha pontilhada de um caderno de desenho, vista sob um foco de luz. Linhas finas de um pixel formam uma grade cinza-clara, ou então pontos pequenos ou grandes se repetem num espaçamento regular, de 8 a 40 pixels. Uma máscara apaga o padrão em direção às bordas, e ele fica visível só no centro ou no topo. Por padrão fica parado; com a animação ligada, o padrão desliza sem parar numa das oito direções, num ciclo de 10 segundos. No modo escuro, linhas e pontos ficam cinza-escuros. O conteúdo vai dentro do componente.
Você pode estar procurando isto se pediu algo assim
- fundo quadriculado discreto para separar as seções da landing page
- fundo de pontinhos tipo papel pontilhado atrás do título
- grade que se mexe devagar no fundo do hero
- um fundo técnico, meio papel milimetrado, para site de dev
- deixar a seção de recursos menos branca sem pesar a página
- fundo com grid que some nas bordas, estilo site de startup
- padrão de pontos deslizando na diagonal sem usar imagem
Também chamado de
- fundo quadriculado
- fundo pontilhado
- padrão de pontos
- papel milimetrado
- grid background
- dot pattern
- animated grid pattern
Quando usar
- Alternar o fundo entre seções de uma landing page sem pesar
- Hero de ferramenta para desenvolvedores, API ou produto técnico
- Seções de recursos, preços ou integrações que pedem textura discreta
- Páginas de documentação ou de changelog com visual limpo
Quando evitar
- Texto pequeno sobre a grade, em que as linhas competem com as letras
- Marcas de visual orgânico ou artesanal, que pedem algo menos geométrico
Como pedir para a sua IA
Adicione um fundo com padrão de grade em CSS atrás das seções da landing page: linhas finas nas cores da minha marca sumindo nas bordas, deslizando devagar só quando eu ligar a animação, paradas para quem prefere menos movimento e com bom contraste no claro e no escuro.
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 Pattern Background
O Pattern Background pesa na página?
Quase nada. O Pattern Background é feito só com gradientes CSS e uma máscara, sem canvas nem JavaScript de animação, e é classificado como Leve no THM Componentes. Com a animação ligada, o navegador apenas desloca a posição do fundo em loop. Ainda assim, o prompt pede à IA para comparar LCP e INP antes e depois.
Como ligar a animação do Pattern Background?
Por padrão, o Pattern Background fica parado. A prop animate liga o movimento, direction escolhe uma das oito direções, como top ou bottom-right, e speed define a duração do ciclo: 10 segundos por padrão, com opções de 5 e 25. O componente não lê a preferência de movimento reduzido, então o prompt do THM Componentes pede à IA uma versão estática.
Dá para usar as cores da minha marca no Pattern Background?
Sim. As cores do Pattern Background ficam nas classes do arquivo index.ts, um tom de cinza para o modo claro e outro para o escuro. O prompt do THM Componentes pede que a IA as troque pelos tokens de cor do projeto, sem cores fixas. Manter o contraste baixo evita que o padrão dispute atenção com o texto.
