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
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.
