# Granizo Quadrados que caem devagar numa grade e se empilham no fundo, como num jogo de encaixar blocos, e somem ao clique. > Granizo é um fundo do THM Componentes em que quadrados acendem no topo de uma grade, caem uma linha por segundo e se empilham; quando uma linha se completa, ela some. Um clique ou toque apaga o bloco. Usa HTML e CSS, gera seus tons a partir de uma cor e combina com páginas 404 e eventos. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/granizo/ ## Como ele é Lembra um jogo clássico de blocos que caem, jogado em câmera lenta sobre papel quadriculado. A área vira uma grade de quadrados com contornos finos, e a cada segundo um quadrado novo acende numa coluna aleatória do topo e desce uma linha por vez até parar sobre os outros, formando pilhas no fundo. Quando a última linha se completa, ela some. Os blocos aparecem e desaparecem num esmaecimento suave, clareiam quando o cursor passa e somem com um clique. Toda a paleta sai de uma única cor, com tons próprios para o modo claro e o escuro; na demo, verde, com as bordas da grade se apagando em círculo. ## Você pode estar procurando isto se pediu algo assim - “fundo com quadradinhos caindo tipo videogame antigo” - “algo divertido para a página de erro 404” - “blocos que caem, empilham no fundo e somem quando clico” - “fundo de jogo retrô para landing de evento jovem” - “grade com quadrados acendendo e descendo devagar” - “deixar a página de espera mais divertida com um joguinho no fundo” - “efeito de pixels caindo que a pessoa pode clicar para apagar” ## Também chamado de blocos que caem e se encaixam, blocos caindo, grade de pixels, fundo gamificado, fundo de jogo retrô, falling blocks, pixel grid animation ## Quando usar - Página 404 ou de erro que aceita um toque de humor - Landing de evento jovem, hackathon ou campanha gamificada - Tela de espera, de manutenção ou de lista de espera - Seção de marca ligada a jogos, tecnologia ou cultura retrô ## Quando evitar - Páginas de vendas sérias, em que um jogo no fundo distrai da decisão - Telas com muito texto por cima, já que a grade e os blocos competem com a leitura ## Como pedir para a sua IA ```text Crie um fundo de blocos que caem e se encaixam na minha página 404: quadrados nas cores da marca descendo e empilhando numa grade, que somem ao clicar ou tocar, com versão parada para movimento reduzido, bom contraste no modo escuro e renderização só no cliente no Nuxt. ``` 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 Granizo ### Dá para jogar de verdade com Granizo? Não é um jogo completo. Em Granizo, quadrados soltos caem sozinhos, um por segundo, e se empilham no fundo da grade; quando a última linha se completa, ela some. A pessoa interage clicando ou tocando num bloco aceso, que se apaga suavemente, e isso já basta para deixar uma página 404 ou de espera mais divertida. ### Como mudar a cor e o tamanho dos blocos de Granizo? A prop squareColor recebe uma cor, e Granizo gera a partir dela uma escala de tons para os blocos, o hover e as bordas, com variações para o modo claro e o escuro. A prop base define quantos blocos cabem numa linha, 10 por padrão: quanto maior o número, menores os quadrados. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto. ### Granizo pesa no celular? O que o componente faz é simples: um temporizador de um segundo move os blocos, sem canvas nem WebGL. Mas cada quadrado da grade de Granizo é um elemento HTML, então áreas grandes com base alta somam muitos elementos à página; reduza base no celular. Na demo, a renderização acontece dentro de ClientOnly, e o prompt do THM Componentes pede carregamento sob demanda. ## Componentes relacionados - [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. - [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. - [Treliça](https://vibecode.thmtecnologia.com/componentes/trelica/): Fundo de grade fina ou de pontos que some nas bordas e pode deslizar devagar numa direção. - [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. - [Folia](https://vibecode.thmtecnologia.com/componentes/folia/): Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta. --- 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.