# Treliça Fundo de grade fina ou de pontos que some nas bordas e pode deslizar devagar numa direção. > Treliça é um fundo do THM Componentes com padrão de grade fina, pontos pequenos ou pontos grandes, que some suavemente nas bordas. Usa só CSS, vem sem movimento por padrão e pode deslizar em oito direções. Serve para dar textura a heros técnicos e separar seções de landing pages sem pesar, no claro e no escuro. - 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: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/trelica/ ## 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 ```text 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. ## Componentes relacionados - [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. - [Arranha-céu](https://vibecode.thmtecnologia.com/componentes/arranha-ceu/): Grade de quadradinhos que acendem e apagam ao acaso, em ritmo lento, como um painel de LED em repouso. - [Canelado](https://vibecode.thmtecnologia.com/componentes/canelado/): Listras finas e discretas, na diagonal, na horizontal ou na vertical, que dão textura ao fundo de uma área. - [Ladrilho](https://vibecode.thmtecnologia.com/componentes/ladrilho/): Uma grade de logos inclinada em 3D em que o logo sob o mouse salta para a frente e brilha em verde. - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. --- 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.