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 Treliça
Treliça pesa na página?
Quase nada. Treliça usa só gradientes CSS e uma máscara, sem canvas nem JavaScript de animação, e tem classificação 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 de Treliça?
Por padrão, Treliça não se mexe. 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 em Treliça?
Sim. As cores de Treliça 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.
