Como ele é
Pense num painel de LED desligado em que alguns pontos acendem e apagam sozinhos. A área é coberta por quadradinhos de 4 pixels com 6 de espaço entre eles, cada um com uma intensidade sorteada, e a cada instante alguns trocam de brilho, sem padrão. O ritmo é lento e o efeito é sutil, quase uma textura. A cor padrão é preta; a demo usa azul-claro, com uma máscara circular que apaga as bordas e concentra o brilho no centro. O canvas não captura cliques e ocupa a área que você definir.
Você pode estar procurando isto se pediu algo assim
- fundo discreto de pontinhos piscando para seção de tecnologia
- aquele grid de quadradinhos que acendem e apagam sozinhos
- textura animada sutil para o fundo de um dashboard
- fundo com cara de painel de LED para página de produto dev
- pontos piscando devagar atrás do título, sem chamar muita atenção
- algo tipo matriz de pixels animada no hero de uma startup
Também chamado de
- fundo de pixels piscando
- grade piscante
- dot grid background
- pixel grid animation
- fundo de pontos animado
- LED grid
- painel de LED animado
Quando usar
- Seções técnicas, de infraestrutura ou de segurança em sites de tecnologia
- Fundo de dashboard ou de painel que pede movimento discreto
- Hero de startup ou de produto para desenvolvedores
- Áreas atrás de cards ou de números de destaque
Quando evitar
- Público sensível a movimento, se a versão estática pedida no prompt não for feita
- Áreas muito grandes em aparelhos fracos, porque cada quadradinho é redesenhado a cada quadro
Como pedir para a sua IA
Crie um fundo de grade de pontos que piscam ao acaso em Canvas 2D atrás da seção de recursos: cor do meu tema, piscar lento e discreto, máscara que suaviza as bordas, pausa fora da tela e versão parada para quem prefere menos movimento.
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 Arranha-céu
Como troco a cor de Arranha-céu?
Pela prop color. Em Arranha-céu, informe a cor em hexadecimal de seis dígitos, como o #60A5FA da demo, porque o código converte esse formato para aplicar a transparência; outros formatos saem pretos ou quase pretos. As props maxOpacity e flickerChance controlam a intensidade máxima e a frequência do piscar.
Arranha-céu pesa na página?
Tem peso Médio no THM Componentes. Arranha-céu desenha em Canvas 2D, sem WebGL, e pausa por conta própria quando sai da tela. Em áreas grandes, o número de quadradinhos cresce, então aumentar squareSize ou gridGap deixa o desenho mais leve; o prompt pede teste de LCP e INP no celular.
Arranha-céu reage ao mouse?
Não. Arranha-céu é um fundo ambiente: o piscar é automático e o canvas não captura cliques, então botões e links por cima funcionam normalmente. Se você quer uma grade que acende sob o cursor, Amarelinha, também do THM Componentes, faz isso com SVG.
